overflow-y | 易学教程

overflow-y:auto/hidden/scroll和overflow-x:visible组合渲染异常

阅读更多关于 overflow-y:auto/hidden/scroll和overflow-x:visible组合渲染异常

最近做项目想做一个这样的效果：就是我想要内部div x轴溢出div则显示y轴溢出div则出现滚动条于是用到了overflow-y 和 overflow-x 这个css属性原来以为css中直接设置就ok { overflow-y：scroll; overflow-x: visible; } 但是实际情况是并不好用会出现两边都是scroll的情况上网上查了一下解决方案，很多都说试着将overflow-x和overflow-y放在不同的DOM元素上。但是会因为实际使用情况和逻辑上的复杂程度而变得并不好用。最终解决方案如下：把容器的宽度去掉，让其内容自己撑开容器，这样不会出现滚动条，和横向溢出的最终目的是一样的；然后设置纵向overflow-y:scroll即可。至于浏览器为什么会这样就只搬运了不详细解释参考资料：解决方案： https://power.baidu.com/quest... 原因： http://w3help.org/zh-cn/cause... 来源： https://www.cnblogs.com/baimeishaoxia/p/12059070.html

水平居中布局与滚动条跳动的千年难题

阅读更多关于水平居中布局与滚动条跳动的千年难题

绝大多数的页面间布局都是水平居中布局，主体定个宽度，然后margin: 0 auto的节奏~例如，妇女之友大淘宝的首页： .warp{ width:1190px; margin:0 auto; position:relative; } 然而，这种布局有一个存在一个影响用户体验的隐患。应该都知道，现代浏览器滚动条默认是overflow:auto类型的，也就是如果尺寸不足一屏，没有滚动条；超出，出现滚动条。于是，问题来了： 1，信息流页面，如新浪微博，是从上往下push渲染的。开始只有头部一些信息加载，此时页面高度有限，没有滚动条；然后，更多内容显示，滚动条出现，占据可用宽度，margin: 0 auto主体元素自然会做偏移——跳动产生。 2，JS交互，本来默认页面高度不足一屏，结果点击了个“加载更多”，内容超过一屏，滚动条出现，页面主体就会左侧跳动。 3，结构类似几个页面通过头部的水平导航刷新切换，结果有的页面有滚动条，有的没有。造成的结果就是，导航尼玛怎么跳来跳去！当前优化这种体验问题，一般有两种解决方法：高度尺寸不确定的，例如，新浪微博，使用： body { overflow-y: scroll; } 高度确定的，例如淘宝网首页。使用CSS把页面尺寸布局骨架搭好，再在里面吐数据。于是，要么没有滚动条，要么滚动条直接出现。不会出现跳动。然而，然而

How to make fixed header table inside scrollable div?

阅读更多关于 How to make fixed header table inside scrollable div?

可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试): 问题: I want to make header of my table fixed. Table is present inside the scrollable div. Below is my code. Order ID Order Date Status Vol Number Bonus Paid Reason for no Bonus Data Not Available Data Not Available Data Not Available Below is my CSS, which I am using for the above div: #table-wrapper { position:relative; } #table-scroll { height:250px; overflow:auto; margin-top:20px; } #table-wrapper table { width:100%; } #table-wrapper table * { background:white; color:black; } #table-wrapper table thead th .text { position:absolute; top:-20px;

滚动条出现挤压页面宽度，影响布局

阅读更多关于滚动条出现挤压页面宽度，影响布局

问题描述：当页面突然出现滚动条的时候，页面会突然被挤压，因为滚动条也是需要占位的呀。解决思路：现在目标就是滚动条出现，但是内容位置不变，依然不动。 * { margin: 0; padding: 0; } html { overflow-y: overlay; } .container { height: 200px; padding: 17px; background-color: #00b83f; text-align: right; } <div class="container"> <h1>我是容器内容</h1> </div> 1、新属性overlay chrome下 overflow 有个新的属性值 overlay ，这个属性简直就是为了这个问题而生，他和 auto 有点像，但是区别就是在触发滚动条时候并不挤压空间。但是非常遗憾，这个属性值目前只有chrome支持。 html { overflow-y: overlay; } 2、margin-right: calc(100% - 100vw) 100vw 相对于浏览器的 window.innerWidth ，是浏览器的内部宽度，注意，滚动条宽度也计算在内！而 100% 是可用宽度，是不含滚动条的宽度。没有滚动条的时候，相当于margin-right:0，没什么影响；有滚动条的时候就相当于margin-right:

前端临时禁止滚动条的解决方案

阅读更多关于前端临时禁止滚动条的解决方案

有一些场景，比如弹窗，比如商品的抛物线效果，为了更好的前端用户体验，要求临时禁止滚动条的滚动。参考了前辈的一些经验，比如这位： https://yujiangshui.com/review-how-to-make-popup-mask-effect/ 。现做如下总结。方案1，最为简单粗暴的方式当然是直接将dom的body挂一个样式即overflow:hide。 document.body.style.cssText = 'overflow-y:hidden'; 　　基本思路：需要禁止时执行上面代码，禁用解除则用 document.body.style.cssText = 'overflow-y:auto'; 　　但上述方案存在一个问题，就是页面内容抖动，这产生了不好的前端操作体验。方案2，采用jquery的解决方案，jquery作为老牌的js库，自带禁用功能。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jquery实现方案</title> </head> <body> <div style="height: 200px;width: 100%;"> </div> <div style="text-align: center;"> <button id="btn">点我测试<

深入研究-webkit-overflow-scrolling:touch及ios滚动

阅读更多关于深入研究-webkit-overflow-scrolling:touch及ios滚动

目录 -webkit-overflow-scrolling:touch是什么？解决safari布局抖动的例子 2.1 方案一 2.2 方案二探究-webkit-overflow-scrolling:touch偶尔卡住或不能滑动的bug 3.1 保证使用了该属性的元素上没有设置定位 3.2 如果添加动态内容页面不能滚动，让子元素height+1 3.3 为什么会有卡住不动的这个bug -webkit-overflow-scrolling:touch的其他坑最后的吐槽 -webkit-overflow-scrolling:touch是什么？ MDN上是这样定义的： -webkit-overflow-scrolling 属性控制元素在移动设备上是否使用滚动回弹效果. auto: 使用普通滚动, 当手指从触摸屏上移开，滚动会立即停止。 touch: 使用具有回弹效果的滚动, 当手指从触摸屏上移开，内容会继续保持一段时间的滚动效果。继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。同时也会创建一个新的堆栈上下文。在移动端上，在你用overflow-y:scorll属性的时候，你会发现滚动的效果很木，很慢，这时候可以使用-webkit-overflow-scrolling:touch这个属性，让滚动条产生滚动回弹的效果，就像ios原生的滚动条一样流畅。