滚动条样式与页面抖动解决方案-优快云博客

一、滚动条样式

1. ie8浏览器

名称	描述
scrollbar-arrow-color	三角箭头的颜色
scrollbar-face-color	立体滚动条的颜色（包括箭头部分的背景色）
scrollbar-3dlight-color	立体滚动条亮边的颜色
scrollbar-highlight-color	滚动条的高亮颜色（左阴影？）
scrollbar-shadow-color	立体滚动条阴影的颜色
scrollbar-darkshadow-color	立体滚动条外阴影的颜色
scrollbar-track-color	立体滚动条背景颜色
scrollbar-base-color	滚动条的基色

        出现滚动条的元素{
            /*三角箭头的颜色*/
            scrollbar-arrow-color: #fff;
            /*滚动条滑块按钮的颜色*/
            scrollbar-face-color: #0099dd;
            /*滚动条整体颜色*/
            scrollbar-highlight-color: #0099dd;
            /*滚动条阴影*/
            scrollbar-shadow-color: #0099dd;
            /*滚动条轨道颜色*/
            scrollbar-track-color: #0066ff;
            /*滚动条3d亮色阴影边框的外观颜色——左边和上边的阴影色*/
            scrollbar-3dlight-color:#0099dd;
            /*滚动条3d暗色阴影边框的外观颜色——右边和下边的阴影色*/
            scrollbar-darkshadow-color: #0099dd;
            /*滚动条基准颜色*/
            scrollbar-base-color: #0099dd;
        }

2. 其他浏览器（参考-风铭大师）

名称	描述
::-webkit-scrollbar	滚动条整体部分，其中的属性: width,height,background,border等。
::-webkit-scrollbar-button	滚动条两端的按钮。可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果。
::-webkit-scrollbar-track	外层轨道。可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果。
::-webkit-scrollbar-track-piece	内层轨道，具体区别看下面gif图，需要注意的就是它会覆盖第三个属性的样式。
::-webkit-scrollbar-thumb	滚动条里面可以拖动的那部分。
::-webkit-scrollbar-corner	边角，两个滚动条交汇处。
::-webkit-resizer	两个滚动条交汇处用于拖动调整元素大小的小控件（基本用不上）

::-webkit-scrollbar {
    width: 6px; /*纵向滚动条的宽度*/
    height: 6px; /*横向滚动条的高度*/
    background-color: #181c32;
}

::-webkit-scrollbar-thumb {
    background-color: #5a76cd;
}

二、滚动条造成页面抖动

1. 造成页面抖动的原因：

当布局用到margin:0 auto;左右水平居中时，且有的页面有滚动条，有的页面没有，这样会造成抖动。

div{
  width:1200px;
  margin:0 auto;
}
<body>
  <div></div>
</body>

2. 解决办法（参考1-zh_rey、参考2-OZCNO、推荐参考3-张鑫旭）：

（1）一直存在滚动槽：overflow-y:scroll;

（2）让页面右边偏移滚动条的宽度那么长： margin-left: calc(100vw - 100%); 或 padding-left: calc(100vw - 100%);

1、加在居中定宽主体的父级身上。
2、calc 是CSS3中的计算，IE10+浏览器支持，IE9浏览器基本支持(不能用在background-position上)；-
3、100vw 相对于浏览器的 window.innerWidth，是浏览器的内部宽度，注意，滚动条宽度也计算在内！而100%是可用宽度，是不含滚动条的宽度。于是，calc(100vw - 100%) 就是浏览器滚动条的宽度大小（如果有，如果没有滚动条则是0）！左右都有一个滚动条宽度（或都是0）被占用，主体内容就可以永远居中浏览器啦，从而没有任何跳动！

注意：ie 浏览器有个 offset 偏移量，比较推荐使用 padding-left（能解决部分问题）。
设置 padding-left ，有时候拉动横向滚条条时，页面的偏移量（这个时候是padding）还是不正确，这时需要做响应式。

@media screen and (min-width: 1240px) {
  定宽主体 {
      padding-left: calc(100vw - 100%);
  }
}

此时，原来定宽主体就不用再写 padding-left: calc(100vw - 100%);，只需要写上面这段响应式就可以了。

（3）兼容写法：

html {
  overflow-x: hidden;
  overflow-y: auto;
}
body {
  width: 100vw;
  overflow: hidden;
  padding-left: calc(100vw - 100%);
}

也可以看我之前写的，不过相差不是很大：滚动条造成页面抖动问题

三、滚动条部分留白问题

造成滚动条留白的原因是宽度设置了100%，哪里留白就把那的 width:100% 改为：min-width:100%就好了。

四、让背景图不跟随滚动条滚动

解决办法（参考-站住，别跑）：

（1）css：
在设置背景图的元素中设置一条属性： background-attachment:fixed;，兼容IE6；
（2）js：

<script type="text/javascript">
 　var scrollBackground = true;
</script>

具体效果就看原文吧！