滚动条造成页面抖动问题

总结： 若用到 margin:0 auto; 使页面居中，若部分页面出现滚动条，滚动条默认有 20px，这样会造成页面抖动；

解决办法：参考
1. html{overflow:scoll;} 让页面一直显示滚动条。
overflow 的几个属性值：

2. padding-left: calc(100vw - 100%); 自动计算滚动条的宽度，并让主体左边距离页面该（滚动条的）宽度。

比如：我想让画红框部分不受滚动条影响，那么此时我就给这一部分添加这条样式。还可以写成： margin-left: calc(100vw - 100%);
当浏览器宽度比较小的时候，左侧留的白明显与右边多，此时，做点响应式处理会更好一点：

@media screen and (min-width: 1150px) {.wrap-outer {margin-left: calc(100vw - 100%);}
}

需要注意的是，此时主体不需要再写 calc(100vw - 100%)。

3. 其他

html {overflow-y: scroll;
}:root {overflow-y: auto;overflow-x: hidden;
}:root body {position: absolute;
}body {width: 100vw;overflow: hidden;
}

滚动条的样式设置

主要针对于 Google 浏览器

::-webkit-scrollbar 滚动条整体部分
::-webkit-scrollbar-thumb 滚动条里面的小方块，能向上向下移动（或向左向右移动）
::-webkit-scrollbar-track 滚动条的轨道（里面装有Thumb）
::-webkit-scrollbar-button 滚动条的轨道的两端按钮，由于通过点击微调小方块的位置。
::-webkit-scrollbar-track-piece 内层轨道，滚动条中间部分
::-webkit-scrollbar-corner 边角，即垂直滚动条和水平滚动条相交的地方
::-webkit-resizer 两个滚动条的交汇处上用于拖动调整元素大小的小控件

/* 滚动条的宽度 */
#app::-webkit-scrollbar{width:4px;
}
/* 滚动的滑块 */
#app::-webkit-scrollbar-thumb{border-radius: 10px;-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);background: rgba(0,0,0,0.2);
}
/* 外层轨道 */
#app::-webkit-scrollbar-track {-webkit-box-shadow:inset 0 0 5px rgba(0,0,0,0.2);border-radius: 0;background: rgba(0,0,0,0.1);
}

兼容 ie

#app{scrollbar-face-color: #1f7ebe;        /*滚动条凸出部分的颜色*/scrollbar-highlight-color: #1f7ebe;    /*滚动条空白部分的颜色*/scrollbar-shadow-color: #1f7ebe;     /*立体滚动条阴影的颜色*/scrollbar-3dlight-color: #1f7ebe;     /*滚动条亮边的([www.111cn.net](http://www.111cn.net/))颜色*/scrollbar-arrow-color: #1f7ebe;     /*上下按钮上三角箭头的颜色*/scrollbar-track-color: #c1e2f1;     /*滚动条的背景颜色*/scrollbar-darkshadow-color: #1f7ebe;     /*滚动条强阴影的颜色*/scrollbar-base-color: #1f7ebe;     /*滚动条的基本颜色*/
}

滚动条造成页面抖动问题相关推荐

bootstrap打开模态滚动条modal窗口引起页面抖动解决办法
bootstrap打开模态modal窗口引起页面抖动解决办法在使用bootstrap的modal模态窗口组件时,触发后会发现页面有抖动现象.这是因为它隐藏了浏览器滚动条,页面就相当于变宽了,关闭模态 ...
echarts图表鼠标滑过页面抖动
问题现象:使用echarts画柱状图,当鼠标划过图表时有tooltip浮动提示,这时页面出现纵向滚动条,但马上消失,导致页面抖动. 分析:从现象看应该是tooltip导致页面抖动. 去掉tooltip ...
Fast Stone超好用的截图工具，可截取长图，带滚动条的页面
2019独角兽企业重金招聘Python工程师标准>>> Fast Stone下载地址:http://www.mydown.com/soft/402/473304402.shtml 注 ...
Flutter 一个优美的用户体验的登录页面抖动提示文本提示
题记 -- 执剑天涯,从你的点滴积累开始,所及之处,必精益求精,优美的应用体验来自于细节的处理,更源自于码农的自我要求与努力 Flutter是谷歌推出的最新的移动开发框架. [x1]微信公众号的每日 ...
html 滚动条处于页面底部,滚动条一直置于页面底部,开发聊天程序须知。
有些时候(如开发聊天程序),我们需要将将滚动条(scrollbar)保持在最底部,比如聊天窗口,最新发出和收到的信息要显示在最下方,如果要看到最下方的内容,就必须保证滚动条保持在最底部. html P ...
页面抖动(颠簸)和工作集(驻留集)
页面抖动(颠簸) 在页面置换过程中的一种最糟糕的情形是,刚刚换出的页面马上又要换入主存,刚刚换入的页面马上就要换出主存,这种频繁的页面调度行为称为抖动,或颠簸.如果一个进程在换页上用的时间多于执行时间 ...
js实现判断滚动条滚到页面底部并执行事件的方法
这里我主要介绍JS实现判断滚动条滚到页面底部并执行事件的方法: 需要了解三个dom元素,分别是:clientHeight.offsetHeight.scrollTop. clientHeight:这个 ...
java 滚动条的事件_[Java教程]jquery如何判断滚动条滚到页面底部并执行事件
[Java教程]jquery如何判断滚动条滚到页面底部并执行事件 0 2016-04-27 10:00:13 本文章向码农介绍jquery如何判断滚动条滚到页面底部并执行事件.首先理解三个dom元素, ...
jQuery隐藏元素防止页面抖动控制
// 可能导致部分浏览器页面抖动的函数 jQuery(".inputName").hide();// 避免hide()页面抖动 jQuery(".inputName&qu ...

滚动条造成页面抖动问题

滚动条造成页面抖动问题相关推荐

最新文章

热门文章