CSS3特性修改(自定义)浏览器默认滚动条 - 玩世不

      2020-05-18 11:05      HTML5

前言:我们做前端时,会遇到一些需求,要求把默认浏览器的滚动条样式给改写了,诶。好好的改它干啥了,也带不来用户体验,就是好看点嘛!实现原理其实是用了伪元素,webkit的伪元素实现很强,可以把滚动条当成一个页面元素来定义,再结合一些CSS3属性,比如圆角、渐变、rgba等等。最常见的伪元素,我们最熟悉的元素之前和元素之后(::before/::after)【伪类(:hover/:link)】。这里写了一个Demo,来看看...

一、HTML

<div></div>

二、CSS 

<style>.banner_box {width: 100%;height: 2000px;}::-webkit-scrollbar {width: 8px;}::-webkit-scrollbar-thumb {background-color: rgba(0, 0, 0, 0.6);-webkit-border-radius:-moz-border-radius:-o-border-radius:border-radius: 5px;}::-webkit-scrollbar-button {-webkit-box-shadow: inset 0 0 6px rgba(85,85,85,1);background-color: #555;}::-webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 6px rgba(255,255,255,1);background-color: #F5F5F5;}</style>

 三、结果

总结:这种CSS特性,可惜不被IE和火狐兼容,其他的都能看到结果,另外还有一种办法,通过div去改写滚动条。