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

overflow-y Scroll在自定义模式上可见,但不起作用

overflow-y Scroll是CSS属性,用于控制元素在垂直方向上的溢出内容如何显示。当内容超出元素的高度时,overflow-y Scroll属性可以让内容在垂直方向上出现滚动条,以便用户可以滚动查看隐藏的内容。

在自定义模式上可见,但不起作用可能是由于以下原因:

  1. 元素的高度不足以容纳溢出的内容:如果元素的高度不够大,无论设置overflow-y为Scroll还是其他值,都无法显示滚动条。此时,可以尝试增加元素的高度或者使用其他布局方式来确保足够的空间来显示溢出内容。
  2. 元素的overflow属性被其他样式覆盖:如果在自定义模式上可见,但是overflow-y Scroll属性不起作用,可能是因为其他样式覆盖了该属性。可以检查是否有其他CSS样式或者JavaScript脚本修改了元素的overflow属性,导致Scroll属性失效。
  3. 元素的父级容器也需要设置overflow属性:如果元素的父级容器没有设置overflow属性,即使元素自身设置了overflow-y Scroll,也无法显示滚动条。需要确保父级容器也设置了适当的overflow属性,例如overflow: auto或overflow: scroll。

总结起来,要使overflow-y Scroll属性起作用,需要确保元素的高度足够容纳溢出的内容,没有其他样式覆盖该属性,并且元素的父级容器也设置了适当的overflow属性。

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

相关·内容

css笔记 - 张鑫旭css课程笔记之 overflow 篇

如果overflow-x、overflow-y的值不相同,且其中一个属性的值被赋予visible,而另一个被赋予scroll、auto、hidden等值,那么visible会被重置为auto。...比如:overflow-x:hidden;那么overflow-y就会被重置为auto。...因为页面滚动条不是作用在body的。 新建一个空白页面,body标签有一个0.5em的默认margin值。...自定义滚动条插件 Jquery自定义滚动条, git地址,兼容到ie8+以上浏览器 js滚动高度 Chrome浏览器写法: document.body.scrollTop 其他浏览器: document.documentElement.scrollTop...可以触发BFC的几种情况分析: overflow: 非visible;有自适应性,但是溢出不可见限制了其使用场景 float + float: 包裹性+破坏性。但是无法自适应。

2.8K10

overflow的一些小细节笔记

最近在项目中遇到一个问题,同事IE浏览器下测试时出现底部大块空白的问题。如下图: ? 我反复测试,问题并没有重现,最后发现是Windows7系统下的IE浏览器会出现此问题。...经过反复检查,发现在reset文件里面的一行代码的问题,把其中的 overflow-y:scroll; overflow:-moz-scrollbars; 注释掉就好了:  ?...过程中思否找到了一篇 “张鑫旭-overflow的细节笔记”,但是并没有找到张老师的原博客链接,这里就不贴了(如有侵权请告知删除)。...table中的问题 table 中 td 设置尺寸和 overflow:hidden; 不起作用,此时需要 table 为 table-layout:fixed; 才会起作用。...所以他的默认css的 overflow-y:scroll; IE8+ 默认是 overflow:auto; chrome和其他浏览器 在这里,奇葩的是chrome了。

1.8K00

修复一个因为 scrollbar 占据空间导致的 bug

. /> 代码没有什么问题, 不是手动设置的,而且, 我和另一个同事, 还有PM的PC都是OK的: ?...就去测试小哥的PC看, 注意到一个细节, 我PC, 滚动条是悬浮的: ? 在他PC, 滚动条是占空间的: ?...表现: html { overflow-y: overlay; } 兼容性 没有caniuse找到这个属性的兼容性, 也有人提这个问题: ? 问题场景以及解决办法 1....外部容器绝对定位法 用绝对定位,保证了body的宽度一直保持完整空间: html { overflow-y: scroll; // 兼容ie8,不支持:root, vw } :root { overflow-y...内部容器做兼容 .wrapper { overflow-y: scroll; // fallback overflow-y: overlay; } 总结 个人推荐还是用 overlay

3.3K20

wxss学习系列《一》定位(position),布局(Layout)

-ms-page:位置取决于absolute的模式。 7.initial:将指定的值表示为属性的初始值。 8.unset:设置了“inherit”和“initial”,根据属性是否被继承。...6.overflow-x:设置横向溢出内容的方式。 7.overflow-y:设置纵向溢出内容的方式。...2.float 绝对定位中不起作用。大多数企业网站布局都是以float来定位。 四.clear:该属性指出不允许有浮动对象的边。 1.取值:left,right,both,none. ?...2.visible:设置可见。hidden:设置隐藏(隐藏了也占位置)。collapse:隐藏表格的行或者列。 六.overflow:处理溢出内容的方式。...八:overflow-y:纵向处理溢出内容的方式; 1.取值:visible,hidden,scroll,auto。 ? 2.同overflow。

2.4K100

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

除了默认滚动条外,您还可以您的网站内设置自定义垂直滚动条。垂直滚动条可以帮助您的网站用户查看超出容器可见区域的内容。例如,侧边栏导航。您可以设计您的侧边栏以显示可滚动的导航项目列表。...可滚动的侧边栏隐藏扩展内容并显示侧边栏的代码片段如下所示: nav{ /* 先前的样式在这里 */ overflow-y: scroll; }关于overflow-y...overflow-y属性接受两个值之一:scroll或auto。将属性的值设置为scroll会指示浏览器始终向容器添加滚动条。无论目标容器是否有超出其边界的内容,容器始终会有一个滚动条。...自定义滚动条样式您希望为网站的滚动条设置样式的原因之一是为了整个网页实现颜色协调。您可能希望将在网站上使用的颜色数量保持一组最小值。您还可以希望使用不同的颜色来设置滚动条,以便更容易注意到它。...大多数情况下,您可能希望整个网站的所有垂直和水平滚动条保持一致的样式。

1.2K00

CSS 中 关于 Overflow ,你需要了解的这些知识点!

该元素的属性是overflow,它是overflow-x和overflow-y属性的简写形式。 本文中,将会介绍这些属性,然后我们将一起深入讨论与overflow相关的一些概念和用例。...Scroll ? 在上图中,无论内容是否长,滚动条总是可见的。注意,这取决于操作系统。 Auto auto这是一个聪明的关键字,仅当内容比其容器长时才显示滚动条。 ?...注意,图中,只有当内容比其容器长时,滚动条才可见。接下来,我们将讨论与overflow相关的longhand属性 Overflow-X 该家伙负责x轴或元素的水平边。...然而,Safari对iOS(12.4.1)进行测试时,滚动并没有起作用。经过反复试验,当我为子项添加宽度时,滚动起作用了,iOS(13.3)运行就没有问题啦。...Firefox scroll标签 Firefox中,会向导致水平滚动的元素添加一个小标签。 ? 删除元素 有时,上述技术无效。

3.9K20

html div 隐藏滚动条样式,div滚动条样式隐藏与显示

要设置CSS滚动条样式,需要用到overflow-y和overflow-x来设置div盒子对象右侧和底部滚动条效果。...常规overflow怎么设置 overflow-y:scroll 总是显示纵向滚动条 overflow-y:visible 不剪切内容也不添加纵向滚动条 overflow-x:scroll 总是显示横向滚动条...需要时剪切内容并添加滚动条,DIV默认情况也是这个值,但需要设置时候设置即可; hidden:不显示超过对象尺寸的内容; scroll:总是显示滚动条。...div自定义滚动条样式 滚动条的css样式主要有三部分组成: ::-webkit-scrollbar 定义了滚动条整体的样式; ::-webkit-scrollbar-thumb 滑块部分; ::-webkit-scrollbar-thumb...轨道部分; 自定义滚动条样式实例: 1、html代码: 2、css代码: .test{ width: 50px; height: 200px; overflow: auto; float: left

8.7K60

浏览器滚动条的自定义和隐藏

---- 我们处理业务的时候,偶尔会因为某些非抵抗力因素,需要对浏览器的滚动条进行处理,以提升产品的体验。...本文我们来谈谈关于浏览器滚动条的自定义和隐藏 自定义滚动条 首先,我们来认识滚动条的那些选择器。...scrollbar-button 滚动条的上下按钮 mac 俺试了没效果,读者可以 window 尝试下 scrollbar-thumb 滚动条的滑块 scrollbar-track-piece....div1 { overflow: hidden; /* 隐藏 x 轴和 y 轴滚动条,即隐藏滚动条 */ } .div2 { overflow-y: hidden; /* 隐藏 y 轴,即垂直滚动条...*/ } .div3 { overflow-x: hidden; /* 隐藏 x 轴,即水平滚动条 */ } 但是,这个方法有一个劣势:所在的容器是不可滚动了,但是超出的部分不可见

2.2K30

收藏 | 移动端H5开发常用技巧总结

「解决方案」 滚动容器增加滚动 touch 方法 .wrapper { -webkit-overflow-scrolling: touch; } 设置 overflow 设置外部 overflow...body { overflow-y: hidden; } .wrapper { overflow-y: auto; } js 篇 移动端click屏幕产生200-300 ms的延迟响应 移动设备的...手指按住屏幕拉,底部多出一块白色区域。 iOS 中,手指按住屏幕上下拖动,会触发 touchmove 事件。...如果该元素已经浏览器窗口的可见区域内,则不会发生滚动。 true,则元素将在其所在滚动区的可视区域中居中对齐。 false,则元素将与其所在滚动区的可视区域最近的边缘对齐。...根据可见区域最靠近元素的哪个边缘,元素的顶部将与可见区域的顶部边缘对准,或者元素的底部边缘将与可见区域的底部边缘对准。

4.2K20

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

我们之前的两篇文章中,我们给大家介绍了关于CSS设置div滚动条样式、以及CSS3自定义滚动条样式的实例, 都知道当内容超出容器时,容器会出现滚动条,那我们如何使用CSS控制滚动条样式的呢?...scrollbar-track-color: #666; /*立体滚动条背景颜色*/ scrollbar-base-color:#f8f8f8; /*滚动条的基本颜色*/ Cursor:url(mouse.cur); /*自定义个性鼠标...overflow:auto;需要时剪切内容并添加滚动条。 overflow:hidden;不显示超过对象高度的内容。 overflow:scroll;总是显示纵向滚动条。...overflow 水平及垂直方向内容溢出时的设置 overflow-x 水平方向内容溢出时的设置 overflow-y 垂直方向内容溢出时的设置 以上属性设置的值为visible、scroll、hidden...任何超出”width”和”height”的内容都会不可见scroll 无论内容是否超越范围,都将显示滚动条。

5.9K20

对html与body的一些研究与理解

这里看上去是标签下的背景色起作用了,我到不这么认为,这里不是body的background起作用,而是body作为一个根节点起作用了,标签未被激活,body担当类似于根节点的节点...空白页面下IE和Firefox火狐浏览器左侧的滚动条与否 Firefox下没有滚动条,有时候会产生体验的一些问题,比如:假设一个页面高度有限,无滚动条,当鼠标移到一个元素,要显示一个浮动层,但是这个浮动层有一定的高度...很多人会想到设置 body{overflow-y:scroll;} Firefox下是出现了滚动槽了,但是IE下出现了两个滚动条,如下: ?...所以呢,只要在css中些写上: html{overflow-y:scroll;} 就可以让IE和Firefox(包括chrome)浏览器默认产生滚动条的滚动槽了。...4.关于background的fixed固定定位 Firefox是支持background:fixed定位的,IE6只能说是半支持,好吧,这么说吧,可能不太严谨,就是背景图片固定的效果似乎只根结点起作用

2.1K30

vue自定义指令监听元素是否进入父元素视窗内

想到的方案:直接监听滚动高度,根据滚动距离来计算是否展现在页面内借助第三方插件,找到一个 vue-check-view,不过只能监听整个 window 视窗的页面滚动,如果想监听某个元素的内部滚动是否可见没法实现刚开始直接用的...vue-check-view,但是因为项目是用 electron 开发的桌面应用,布局需要在列表父盒子实现滚动。...然后想到h5里新出的监听元素是否进入视口的 IntersectionObserver,一看好像可以满足,借助 vue 的自定义指令来封装成一个自定义指令使用。...除了核心功能默认内置的指令 (v-model 和 v-show),Vue 也允许注册自定义指令。注意, Vue2.0 中,代码复用和抽象的主要形式是组件。...使用方式使用方式一:v-viewport="handleViewport" 直接绑定一个回调方法使用方式二:v-viewport="{callback: handleViewport, root: '#scroll

27310

vue自定义指令和IntersectionObserver接口,监听元素进入父元素视窗内的实际应用

想到的方案: 直接监听滚动高度,根据滚动距离来计算是否展现在页面内 借助第三方插件,找到一个 vue-check-view,不过只能监听整个 window 视窗的页面滚动,如果想监听某个元素的内部滚动是否可见没法实现...刚开始直接用的 vue-check-view,但是因为项目是用 electron 开发的桌面应用,布局需要在列表父盒子实现滚动。...然后想到h5里新出的监听元素是否进入视口的 IntersectionObserver,一看好像可以满足,借助 vue 的自定义指令来封装成一个自定义指令使用。...除了核心功能默认内置的指令 (v-model 和 v-show),Vue 也允许注册自定义指令。注意, Vue2.0 中,代码复用和抽象的主要形式是组件。...使用方式一:v-viewport="handleViewport" 直接绑定一个回调方法 使用方式二:v-viewport="{callback: handleViewport, root: '#scroll

40940

HTML- white-space 和 overflow 两个重要的 CSS 属性

点击按钮 day4-前端 菜单会滚动到中间,iOS中想要实现这种效果还是比较简单的,接下来看看在前端中实现这种效果的要点有哪些?...一、所有的菜单项单行显示,不换行 前端的默认布局方式是 流式布局 ,块级元素 流式布局中独占一行,块级元素会自上而下的排列且默认宽度是父类元素的100%而高度默认被内容撑开,例如 div。...我们要的是单行显示,所以使用 span 标签就能实现我们要的效果,但是还要 不换行,这时就要利用 CSS 的 white-space 属性了,它会告诉浏览器遇到 空格 该怎么处理(这里的空格不是单纯意义的空格...从下面的注释可以知道我们要选择 scroll ,上下左右滑动可以通过 overflow-x 和 overflow-y 分别控制各个方向的具体表现。 /* 默认值。...内容不会被修剪,会呈现在元素框之外 */ overflow: visible; /* 内容会被修剪,并且其余内容不可见 */ overflow: hidden; /* 内容会被修剪,浏览器会显示滚动条以便查看其余内容

2.6K20
领券