2023年6月20日发(作者：)

css实现横向滚动条和纵向滚动条样式_浏览器实现移动端滚动条效果细⼼的⽤户会发现，同样⾝为Chrome浏览器，PC端和移动端的滚动条效果是不同的。以百度新闻⾸页为例，移动端Chrome浏览器打开效果是这样的：这与PC端滚动条的效果有两个明显的区别：1. 滚动条是滚动时才出现的2. 滚动条是悬浮在内容上⽅的可能有些同学会说：”我的PC端和移动端效果差不多啊，都是悬浮在内容上⽅的，滚动条也是滚动时出现不滚动就隐藏的“。那我可得说道说道了。⾸先，滚动条效果是受操作系统影响的滚动条效果是受操作系统影响的，以MAC为例，在系统偏好设置⾥有滚动条默认⾏为的设置：如果设置了滚动时才有，那就有了移动端的滚动时才出现的效果。但是如果我们开发web应⽤，想要⽤户有⼀致的体验，显然不能通过⽤户的设置来保证，得想其他办法。其次：”PC端浏览器滚动条是悬浮在内容上⽅“的说法也不准确。这其实需要有⼀个前提，就是你浏览器的滚动条没有⾃定义过样式的浏览器的滚动条没有⾃定义过样式的情况下，它才会默认悬浮在内容上⽅。情况下，它才会默认悬浮在内容上⽅你可能会说浏览器默认滚动条效果就不错啦，不⽤设置⾃定义样式了。但是，不通过⾃定义样式，你怎么让滚动条有移动端那样滚动时才出现的效果呢？所以如果你要想要PC端浏览器有移动端滚动条的效果，你就会⾯临这样的问题：你需要设置滚动条的样式，但是设置了滚动条的样式你就会让滚动条悬浮效果失效，⽐如像下⾯这样：这样全屏颤抖的体验显然很不好。下⾯就要说重点了，这个问题怎么解决呢？就是下⾯这⾏css了：overflow: overlay;这个属性⼏乎就是为了解决这个问题量⾝定做的，需要注意的是⽬前只有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;

}最终效果：

2023年6月20日发(作者：)

css实现横向滚动条和纵向滚动条样式_浏览器实现移动端滚动条效果细⼼的⽤户会发现，同样⾝为Chrome浏览器，PC端和移动端的滚动条效果是不同的。以百度新闻⾸页为例，移动端Chrome浏览器打开效果是这样的：这与PC端滚动条的效果有两个明显的区别：1. 滚动条是滚动时才出现的2. 滚动条是悬浮在内容上⽅的可能有些同学会说：”我的PC端和移动端效果差不多啊，都是悬浮在内容上⽅的，滚动条也是滚动时出现不滚动就隐藏的“。那我可得说道说道了。⾸先，滚动条效果是受操作系统影响的滚动条效果是受操作系统影响的，以MAC为例，在系统偏好设置⾥有滚动条默认⾏为的设置：如果设置了滚动时才有，那就有了移动端的滚动时才出现的效果。但是如果我们开发web应⽤，想要⽤户有⼀致的体验，显然不能通过⽤户的设置来保证，得想其他办法。其次：”PC端浏览器滚动条是悬浮在内容上⽅“的说法也不准确。这其实需要有⼀个前提，就是你浏览器的滚动条没有⾃定义过样式的浏览器的滚动条没有⾃定义过样式的情况下，它才会默认悬浮在内容上⽅。情况下，它才会默认悬浮在内容上⽅你可能会说浏览器默认滚动条效果就不错啦，不⽤设置⾃定义样式了。但是，不通过⾃定义样式，你怎么让滚动条有移动端那样滚动时才出现的效果呢？所以如果你要想要PC端浏览器有移动端滚动条的效果，你就会⾯临这样的问题：你需要设置滚动条的样式，但是设置了滚动条的样式你就会让滚动条悬浮效果失效，⽐如像下⾯这样：这样全屏颤抖的体验显然很不好。下⾯就要说重点了，这个问题怎么解决呢？就是下⾯这⾏css了：overflow: overlay;这个属性⼏乎就是为了解决这个问题量⾝定做的，需要注意的是⽬前只有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;

}最终效果：