css实现横向滚动条和纵向滚动条样式_浏览器实现移动端滚动
条效果
细⼼的⽤户会发现，同样⾝为Chrome浏览器，PC端和移动端的滚动条效果是不同的。以百度新闻⾸页为例，移动端Chrome浏览器打开效果是这样的：
这与PC端滚动条的效果有两个明显的区别：
1. 滚动条是滚动时才出现的
2. 滚动条是悬浮在内容上⽅的
可能有些同学会说：”我的PC端和移动端效果差不多啊，都是悬浮在内容上⽅的，滚动条也是滚动时出现不滚动就隐藏的“。那我可得说道说道了。
滚动条效果是受操作系统影响的，以MAC为例，在系统偏好设置⾥有滚动条默认⾏为的设置：
⾸先，滚动条效果是受操作系统影响的
如果设置了滚动时才有，那就有了移动端的滚动时才出现的效果。但是如果我们开发web应⽤，想要⽤户有⼀致的体验，显然不能通过⽤户的设置来保证，得想其他办法。
其次：”PC端浏览器滚动条是悬浮在内容上⽅“的说法也不准确。这其实需要有⼀个前提，就是你浏览器的滚动条没有⾃定义过样式的
浏览器的滚动条没有⾃定义过样式的情况下，它才会默认悬浮在内容上⽅
情况下，它才会默认悬浮在内容上⽅。
你可能会说浏览器默认滚动条效果就不错啦，不⽤设置⾃定义样式了。但是，不通过⾃定义样式，你怎么让滚动条有移动端那样滚动时才出现的效果呢？
所以如果你要想要PC端浏览器有移动端滚动条的效果，你就会⾯临这样的问题：你需要设置滚动条的样式，但是设置了滚动条的样式你就
会让滚动条悬浮效果失效，⽐如像下⾯这样：
这样全屏颤抖的体验显然很不好。
下⾯就要说重点了，这个问题怎么解决呢？就是下⾯这⾏css了：
overflow: overlay;
html滚动效果代码
这个属性⼏乎就是为了解决这个问题量⾝定做的，需要注意的是⽬前只有webkit内核的浏览器才⽀持，chrome，safari上⽤⽤是没问题
的。
实现完整移动端滚动条效果的代码：
::-webkit-scrollbar { /* 滚动条整体样式 */
width: 10px;    /*⾼宽分别对应横竖滚动条的尺⼨*/
height: 10px;
}
::-webkit-scrollbar-thumb { /* 滚动条⾥⾯⼩⽅块 */
border-radius: 10px;
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
background: #eeeeee;
}
::-webkit-scrollbar-track { /* 滚动条⾥⾯轨道 */
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0);
border-radius: 10px;
}
.auto-scroll { overflow: overlay; ... } /* 需要滚动的地⽅加上这个class */ .auto-scroll ::-webkit-scrollbar { /* 组件内滚动条不显⽰ */
display: none;
}
.auto-scroll:hover ::-webkit-scrollbar { /* 悬停时滚动条才显⽰ */
display: block;
}
最终效果：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。