首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

垂直滚动条可见但不起作用的CSS

是指在网页中出现垂直滚动条,但无法通过滚动条来实现内容的滚动。这种情况通常发生在滚动条的样式被修改或者滚动条的属性被设置为不可滚动的情况下。

垂直滚动条可见但不起作用的CSS可能是由以下几种原因引起的:

  1. 滚动容器的高度未设置或设置不正确:滚动容器的高度应该小于其内部内容的高度,才能触发滚动条的出现。如果容器的高度未设置或设置不正确,就会导致滚动条可见但无法滚动。可以通过设置容器的高度属性(如height)来解决这个问题。
  2. 滚动容器的overflow属性设置不正确:滚动容器的overflow属性决定了是否显示滚动条。如果overflow属性被设置为hidden或者scroll,就会导致滚动条可见但无法滚动。应该将overflow属性设置为auto或者visible,以便让滚动条正常工作。
  3. 滚动容器的子元素使用了绝对定位或固定定位:如果滚动容器的子元素使用了绝对定位或固定定位,可能会导致滚动条无法滚动。这是因为绝对定位和固定定位会将元素从文档流中移除,使得滚动容器无法计算其内部内容的高度。可以尝试将子元素的定位属性改为相对定位或静态定位,以解决这个问题。
  4. 滚动容器的内容没有超出容器的高度:如果滚动容器的内容没有超出容器的高度,就不会触发滚动条的出现。可以通过增加容器内部内容的高度或者减小容器的高度来解决这个问题。

总结起来,要解决垂直滚动条可见但不起作用的CSS问题,需要确保滚动容器的高度设置正确,overflow属性设置正确,子元素的定位属性设置正确,并且容器的内容超出容器的高度。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

css如何隐藏垂直滚动条但同时需保持滚动

前言 在写前端页面时,对于超出内容,我们希望隐藏,同时保持垂直滚动,但是又不希望有丑陋垂直滚动条,那该怎么去实现呢 实现方式有很多种,可以用iscroll插件,也可以用css去解决 01 方法1-...计算滚动条宽度并隐藏起来 这种方法主要是通过计算滚动条宽度,给隐藏起来,如下示例所示 具体片段代码如下所示 <div...,实现隐藏 bottom: 0; overflow-x: hidden; overflow-y: scroll; // 垂直滚动 } 02 方法2-使用三个容器包围起来,不需要计算滚动条宽度...隐藏滚动条方法,不过这个方法不兼容IE,做移动端可以使用。...,同时隐藏掉滚动条,如果不考虑IE兼容性,那么就可以直接使用第三种方式最简单,当然也可以使用一些第三方库,插件去实现,比如iscroll,具体用哪个,看自己项目的,适合自己才是最好

2.1K10

如何使用 CSS 设置和自定义水平和垂直滚动条

例如,您可以定制滚动条样式以匹配网站外观和感觉。在本文中,我们将讨论何时设置水平和垂直滚动条,如何设置它们以及如何使用CSS自定义它们外观。...我们将在以下几个部分中讨论这个主题:设置自定义垂直滚动条设置自定义水平滚动条自定义滚动条样式设置自定义垂直滚动条这是用户在网站上与之交互最频繁滚动条类型。...垂直滚动条非常常见,因为浏览器为所有网站设置了默认垂直滚动条。除了默认滚动条外,您还可以在您网站内设置自定义垂直滚动条垂直滚动条可以帮助您网站用户查看超出容器可见区域内容。例如,侧边栏导航。...body高度以使其足够长以滚动以下CSS代码片段描述了如何将初始导航栏样式设置为侧边栏并调整body底部边距。...使用滚动条管理内容溢出防止导航项目显示在侧边栏之外非常简单。只需使用一行CSS代码即可完成此操作,该行代码使用overflow-y属性。

83400

css控制滚动条透明,CSS控制滚动条样式解析

我们在之前两篇文章中,我们给大家介绍了关于CSS设置div滚动条样式、以及CSS3自定义滚动条样式实例, 都知道当内容超出容器时,容器会出现滚动条,那我们如何使用CSS控制滚动条样式呢?...*隐藏滚动条: 1、去掉水平方向滚动条: 2、去掉垂直方向滚动条: 3、隐藏横向、显示纵向滚动条: 4、隐藏全部滚动条: 或者 更好方法就是把滚动条颜色设置为完全透明,这样既可以实现内容滚动...overflow 水平及垂直方向内容溢出时设置 overflow-x 水平方向内容溢出时设置 overflow-y 垂直方向内容溢出时设置 以上属性设置值为visible、scroll、hidden...任何超出”width”和”height”内容都会不可见。 scroll 无论内容是否超越范围,都将显示滚动条。...相信通过本文学习,小伙伴们对css控制滚动条样式,有了进一步了解和认识,希望对你工作有所帮助!

5.8K20

css增加横着滚动条_CSS 设置滚动条样式实现「建议收藏」

2、scrollbar corner为横向和竖向交叉角区域 3、resize用来设置滚动条交汇处上用于拖动调整元素大小小控件 一旦发现滚动条自定义样式,浏览器默认样式设置将会失效,只使用在css...-webkit-scrollbar /* 滚动条整体部分,重置时必须要设置 */ -webkit-scrollbar-button /* 滚动条轨道两端按钮 */ -webkit-scrollbar-track.../*滚动条里面的小方块*/ -webkit-scrollbar-corner /* 垂直和水平交叉角 */ -webkit-resize // 滚动条交汇处上用于拖动调整元素大小小控件 */ 可以结合以下伪类进行设置...(不同操作系统浏览器滚动条可能不一样,所有可以根据下面伪类来设置): :horizontal 水平方向track、track-piect、thumb :vertica 垂直方向track、track-piect.../*滚动条前景色,对应thumb*/ scrollbar-shadow-color /*滚动条边线色,thubmborder*/ scrollbar-highlight-color /*滚动条整体颜色

3.1K20

CSS——实现元素垂直居中

在写CSS过程中,我常常谷歌一个东西,就是如何实现元素垂直居中,水平居中难度还不是很大,但是垂直居中我这个烂记性是写一次忘一次,于是本着好记性不如烂笔头想法,写下一篇博客记录下来。...那么今天就记录下三种垂直居中方法,各位看官按需使用。 通用情况 首先我们先介绍一种通用情况下垂直居中,这个方法不需要设置自己高度,也不需要父容器设置高度,利用绝对定位只需要三行代码就能实现。...,不设置高度 那么来看css代码如何完成垂直居中: #outter1{ position:relative; background:black...如果不用考虑老式浏览器兼容的话,直接用flex布局来搞定就是非常简单了,三行代码搞定垂直居中。...里垂直居中方法了,希望写下这篇文章我,在遇到垂直居中问题时,再也不用谷歌了。

1.3K30

CSS水平垂直居中方法

原文链接:http://caibaojian.com/370.html 水平垂直居中,特别是使用在列表时候经常会用到,以前有需求时候我也做过类似的代码,是使用display:table-cell...,mg12博客那个相关文章列表好像就是使用这个代码来,之前我也是参考他来。...第一种:相对定位法 原理是父类浮动同时向左left:50%,而子类则向左浮动同时left:50%; .centerlist {position:relative...另外你还可以使用表格方式来水平居中。 说完了水平居中,下面说垂直居中。 如果元素是内联元素,并且只有一行,则我们可以通过line-height来设置与其高度同样大小,则实现了垂直居中了。...[endif]--> 可以使用IE特有的条件语法,不过我习惯用ie hack来写。下面这个代码实现了水平垂直多行代码(支持一行)居中对齐。目前测试IE、chrome和Firefox均兼容。

19210

详解各种获取元素宽高及位置属性

该属性包括内边距,但不包括垂直滚动条(如果有)、边框和外边距。 var clientWidth = element.clientWidth; ?...clientHeight Element.clientWidth 是一个只读属性,对于没有定义 CSS 或者内联布局盒子元素为0,同时它是元素内部高度(单位像素),包含内边距,但不包括水平滚动条、边框和外边距...clientHeight 可以通过 CSS height + CSS padding - 水平滚动条高度 (如果存在)来计算。...一个元素 scrollTop 值是这个元素顶部到它最顶部可见内容(顶部)距离度量。当一个元素内容没有产生垂直方向滚动条,那么它 scrollTop 值为0。...没有垂直滚动条情况下,scrollHeight值与元素视图填充所有内容所需要最小值clientHeight相同。包括元素padding,但不包括元素border和margin。

3.8K80

CSS垂直水平居中背后

后面若是写css系列时候再详细讲吧。   ...所以在解决问题切入点上就很难区分要以什么样角度去分类,从而作为后面解题基础,本菜鸡就以知识点也就是css属性为切入点来分类,针对不同场景父子盒子垂直水平提出解决方案。   ...第一部分 独立   这一部分,我只提供某一个CSS属性所提供独立能力,比如它可以实现垂直居中,或者水平居中,或者可以实现垂直水平居中。让我们深入理解单独属性能力。...不信大家可以亲自试一试    确实垂直居中了,因为table-cell天然垂直居中,当然,它垂直居中原因则是因为tableDOM会默认赋予一些css属性,比如vertical-align。...第二部分 组合   上一个部分,我们花了不小篇幅去整理一些在垂直水平居中问题上可以用到css属性,我都是单独拎出来简单说明

1.6K10

大家都能看得懂源码之ahooks useInfiniteScroll

但不包括水平滚动条、边框和外边距。...一个元素 scrollTop 值是这个元素内容顶部(卷起来)到它视口可见内容(顶部)距离度量。当一个元素内容没有产生垂直方向滚动条,那么它 scrollTop 值为 0。...一个元素 scrollTop 值是这个元素内容顶部(卷起来)到它视口可见内容(顶部)距离度量。当一个元素内容没有产生垂直方向滚动条,那么它 scrollTop 值为 0。...clientHeight[7] 这个属性是只读属性,对于没有定义 CSS 或者内联布局盒子元素为 0,否则,它是元素内部高度 (单位像素),包含内边距,但不包括水平滚动条、边框和外边距。...clientHeight 可以通过 CSS height + CSS padding - 水平滚动条高度 (如果存在) 来计算。

64930

CSS自定义滚动条样式

本文会介绍CSS滚动条选择器,并在demo中展示如何在Webkit内核浏览器和IE浏览器中,自定义一个横向以及一个纵向滚动条。...1 基础知识 1.1 Webkit内核css滚动条选择器 ::-webkit-scrollbar CSS伪类选择器影响了一个元素滚动条样式 属性: ::-webkit-scrollbar — 整个滚动条...滚动条按钮 (上下箭头) ::-webkit-scrollbar-track-piece — 滚动条没有滑块轨道部分 ::-webkit-scrollbar-corner — 边角,即当同时有垂直滚动条和水平滚动条时交汇部分...1.2 IE自定义滚动条样式 可自定义样式比较少,只能控制滚动条各个部分显示颜色,定制性较低。...,四个角分别使用了四张图片; (2).scolltable实现了水平垂直居中效果,具体方法是:使用绝对对位,将元素定点定位到body中心。

6.5K692

CSS垂直居中七个方法

,都是“垂直居中”这个讨人厌设定,以下将介绍七种单纯利用CSS垂直居中方式。...在此之前,先解释一下CSS里头vertical-align这个属性,这个属性虽然是垂直居中,不过却是指在元素内所有元素垂直位置互相居中,并不是相对于外框高度垂直居中。...(下面的CSS会造成这种样子垂直居中) ?...这时候就必须用到CSS特有的calc动态计算能力,我们只要让要居中divtop属性,与上方距离是“50%外框高度+ 50%div高度”,就可以做到垂直居中,至于为什么不用margin-top...transform transform是CSS3新属性,主要掌管元素变形、旋转和位移,利用transform里头translateY(改变垂直位移,如果使用百分比为单位,则是以元素本身长宽为基准

2.2K41

CSS垂直居中七个方法

在此之前,先解释一下CSS里头vertical-align这个属性,这个属性虽然是垂直居中,不过却是指在元素内所有元素垂直位置互相居中,而不相对于外框高度垂直居中。...(下面的CSS会造成这种样子垂直居中) .div0 { width:200px; 高度:150px; 边框:1px实线#000; text-align:center; } .redbox...那么其他方块就会真正垂直居中。...这时候就必须用到CSS特有的calc动态计算能力,我们只要让要居中divtop属性,与上方距离是“ 50%外框高度-50%div高度”,就可以做到垂直居中,至于为什么不用margin-top...假表格垂直居中 CSS: .like-table { display:table-cell; } td, .like-table { width:150px

2.4K30

jQuery入门教程-CSS样式操作大全

7、设置 CSS 属性 ? 参数 描述 name 必需。规定 CSS 属性名称。该参数可包含任何 CSS 属性,比如 "color"。 value 可选。规定 CSS 属性值。...(1)返回匹配元素相对于父元素位置(偏移)。 (2)该方法返回对象包含两个整型属性:top 和 left,以像素计。 (3)此方法只对可见元素有效。 12、返回水平滚动条位置 ?...14、返回滚动条垂直位置 ? (1)只返回第一个匹配元素滚动条垂直位置。 (2)scroll top offset 指的是滚动条相对于其顶部偏移。...(3)如果该方法未设置参数,则返回以像素计相对滚动条顶部偏移。 (4)该方法对于可见元素和不可见元素均有效。 15、设置滚动条垂直位置 ? 参数 描述 offset 可选。...规定相对滚动条顶部偏移,以像素计。 (1)设置所有匹配元素 scroll top offset。 (2)该方法对于可见元素和不可见元素均有效。 16、返回高度 ?

1.2K30

一文彻底搞懂js中位置计算

,包括由于溢出导致视图中不可见内容。...没有垂直滚动条情况下,scrollHeight值与元素视图填充所有内容所需要最小值clientHeight相同。包括元素padding,但不包括元素border和margin。...该属性包括内边距 padding,但不包括边框 border、外边距 margin 和垂直滚动条(如果有的话)。 内联元素以及没有 CSS 样式元素 clientWidth 属性值为 0。...如果元素文本方向是从右向左(RTL, right-to-left),并且由于内容溢出导致左边出现了一个垂直滚动条,则该属性包括滚动条宽度。clientLeft 不包括左外边距和左内边距。...element.getBoundingClientRect()返回 height 和 width 是针对元素可见区域宽和高(具体尺寸根据 box-sizing 决定),并不包含滚动条被隐藏内容。

3.7K10

JavaScript 基于offsetHeight和clientHeight判断是否出现滚动条

通常,元素offsetHeight是一种元素CSS高度衡量标准,包括元素边框、内边距和元素水平滚动条(如果存在且渲染的话),不包含:before或:after等伪类元素高度。...或者内联布局盒子元素为0,否则,它是元素内部高度(单位像素),包含内边距,但不包括水平滚动条、边框和外边距。...)、以及CSS设置宽度(width)值。...Element.clientWidth 属性表示元素内部宽度,以像素计。该属性包括内边距,但不包括垂直滚动条(如果有)、边框和外边距。...) { console.log("出现垂直滚动条"); } if (obj.offsetHeight>obj.clientHeight) { console.log("出现水平滚动条"); }

1.3K30

扫码

添加站长 进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

    运营活动

    活动名称
    广告关闭
    领券