常用滚动条知识点总结

时间：2023-04-05 16:22:12 HTML5

参考：自定义浏览器滚动条样式（兼容chrome和firefox）::-webkit-scrollbar【CSS】滚动条样式优化这大概是最全的修改滚动条的文章了style为了隐藏滚动条，首先将元素设置为可滚动：div{height:200px;溢出：滚动；//orauto}webkitwriting:div::-webkit-scrollbar{width:0;高度：0；background-color:transparent;}//或者div::-webkit-scrollbar{display:none;}IE10+:div{-ms-overflow-style:none;}Firefox:div{滚动条宽度：无；}修改webkitwebkitscrollingSelectorforthebar的默认样式：::-webkit-scrollbar-整个滚动条::-webkit-scrollbar-button-滚动条上的按钮（上下箭头）::-webkit-scrollbar-thumb-滚动onthescrollbarSlider::-webkit-scrollbar-track--scrollbartrack::-webkit-scrollbar-track-piece--scrollbartrackpartwithoutslider::-webkit-scrollbar-corner--当垂直滚动时同时bar和水平滚动条相交的部分::-webkit-resizer-右下角可拖动调整大小的滑块比较常用来修改宽度，圆角和颜色：div::-webkit-scrollbar{宽度：10px;}/*滑块*/div::-webkit-scrollbar-thumb{border-radius:25px;背景色：rgb(81,81,255)；}/*track*/div::-webkit-scrollbar-track{背景颜色：rgb(218,255,255);}你也可以使用伪类来更精确地控制滚动条样式：:horizo??ntal选择水平滚动条:vertical选择垂直滚动条：decrement选择上按钮（垂直滚动条），左按钮（水平滚动条）选择滑块上方的轨道片（垂直滚动条），滑块左侧的轨道片（horizo??ntalscrollbar)scrollbar):increment相反:decrement:start选择滑块前面的按钮或轨道片:end选择滑块后面的按钮或轨道片:double-button适用于按钮和轨道片用于判断按钮是否是滚动条同一端的一对按钮中的一个，或者轨道末端的位置是否是一对按钮：single-button适用于按钮和轨道片段判断按钮是否在滚动条的一端独立，或者在轨道的末端位置是否为独立按钮：no-button适用于轨道片段，当两端都没有按钮时选择轨道片段滚动条的：corner-present是否有滚动条corner：window-inactive当焦点不在窗口上时，比如选择滑块的顶部轨道的一部分：div::-webkit-scrollbar-track-piece:start{}IEIE浏览器的滚动条只能修改颜色，不能改变宽度等，其选择器如下：scrollbar-3dlight-color:三维滚动条亮边颜色scrollbar-3dshadow-color:立体滚动条阴影的颜色scrollbar-highlight-color:滚动条空白部分的颜色scrollbar-darkshadow-color:立体滚动条浓阴影的颜色scrollbar-face-color:立体滚动条的颜色scrollbar-arrow-color:三角箭头的颜色scrollbar-track-color:轨道颜色scrollbar-base-color:滚动条的基本颜色FirefoxFirefox的滚动条bar只能修改宽度（属性scrollbar-width）和颜色（属性scrollbar-color）。scrollbar-widthvalue:auto:默认宽度thin:更窄的滚动条none:隐藏滚动条scrollbar-colorvalue:auto:默认颜色light:浅色滚动效果dark:深色滚动效果具体颜色值，可以传两个值，第一个的颜色scrollwheel，第二条滚动条的背景色，如scrollbar-color:redwhite；JS实现滚动条使用容器包裹内容和滚动条：

content

内容

div>

内容

样式中注意隐藏滚动条，将滚动条定位到右侧：.box-wrap{position:relative;高度：400px；宽度：400px;}.box{高度：100%;宽度：100%；边框：1px纯色rgb(52,45,45)；溢出：滚动；}.box::-webkit-scrollbar{显示：无；}.boxdiv{高度：50px；}.scroll{位置：绝对；右：0；顶部：0；背景色：rgb(255,218,218)；宽度：15px；高度：100%；}.scroll__thumb{位置：绝对；右：0；顶部：0；宽度：100%；半径：20px；background-color:brown;}js关键点：比较内容元素的高度与其滚动高度，获取滑块的高度，监听滚动事件，移动滑块constboxWrap=document.querySelector('.box-wrap')constbox=document.querySelector('.box')constthumb=document.querySelector('.scroll__thumb')constboxHeight=boxWrap.clientHeightconstcontentHeight=box.scrollHeightconstpersent=boxHeight/contentHeightthumb.style.height=present*100+%';//滑块高度box.addEventListener('scroll',(e)=>{thumb.style.transform='translateY('+(e.target.scrollTop/boxHeight)*100+'%'})效果图：这只是滚动效果的简单实现，没有改进其他功能比如滑块可以拖动，高度不够不显示滚动条等。懒人推荐使用打包的插件滚动条插件mCustomScrollbar插件的使用也很简单，直接将其js和css文件（文件下载地址）导入页面即可：可以用js初始化，也可以在html中添加class。需要注意的是滚动元素要有height和overflow属性是hidden或者auto：(function($){$(window).on("load",function(){$(".content").mCustomScrollbar();});})(jQuery);