文章目录1. 自定义浏览器滚动条CSS样式基于 WebKitFirefox2.1 自定义CSS样式-webkit更新支持对比前提更新变化 (Chrome为例)使用自定义2.2. 自定义问题 (页面滚动-步进抖动)问题描述问题定位折中处理问题修复1. 自定义浏览器滚动条CSS样式浏览器默认的滚动条样式简单醒目而且不同的浏览器下滚动条的样式也不一样为了美观和统一必须修改滚动条的样式。从滚动条效率和兼容性上选择可以直接在默认滚动条的基础上进行样式修改。现已有更多相关详细设置的文章、本标题内容仅作概述及引用 不再赘述如对本标题内容已有了解可直接跳转标题2 “webkit更新支持” 至本文正文。基于 WebKitMDN文档::-webkit-scrollbar::-webkit-scrollbar仅在基于 Blink 或 WebKit 的浏览器例如 Chrome、Edge、Opera、Safari、iOS 上所有的浏览器以及其他基于 WebKit 的浏览器上可用。使用以下伪元素选择器去修改基于 webkit 的浏览器的滚动条样式::-webkit-scrollbar/* 整个滚动条 */::-webkit-scrollbar-thumb/* 滚动条上的滚动滑块 */::-webkit-scrollbar-button/* 滚动条上的两端按钮上下箭头*/::-webkit-scrollbar-track/* 滚动条轨道 */::-webkit-scrollbar-track-piece/* 滚动条没有滑块的轨道部分 */::-webkit-scrollbar-corner/* 右下角滚动条交汇处的拖动块仅在同时有垂直和水平滚动条时*/::-webkit-resizer/* 右下角可拖动调整大小的滑块 */FirefoxMDN文档scrollbar-width、scrollbar-color火狐浏览器目前只提供了部分自定义滚动条的属性/* 定义滚动条的预定义宽度 */scrollbar-width:auto;/* 默认值 */scrollbar-width:thin;/* 比默认宽度更窄 */scrollbar-width:none;/* 不显示滚动条但是依然可以滚动 *//* 定义滚动条的颜色 */scrollbar-color:auto;/* 默认值 */scrollbar-color:dark | light;/* 显示深色或浅色滚动条但并未实现 */scrollbar-color:red green;/* 第一个滚动滑块颜色第二个滚动条轨道颜色 */详细设置参考文章浏览器滚动条css样式设置附示例自定义浏览器滚动条样式兼容chrome和firefox2.1 自定义CSS样式-webkit更新支持关于定义浏览器滚动条的CSS方法有两种CSS选择器-webkit-scrollbar等 (以-webkit-内核为主的 Chrome等主流浏览器)CSS属性scrollbar-width、scrollbar-color(-moz-内核的 Firefox火狐浏览器)查询支持Can I usescrollbar对比前提moz内核的 Firefox火狐浏览器 专用scrollbar-width/color属性不支持-webkit-scrollbar选择器以webkit内核为主的 Chrome等主流浏览器 专用-webkit-scrollbar选择器不支持scrollbar-width/color属性更新变化 (Chrome为例)最近更新开始支持 “scrollbar-width/color” 属性 (2024-01-23Chrome 121及以上版本)Chrome 121版本之前CSS属性可混用moz样式实现同一定义下webkit和moz的两种显示效果Chrome 121版本之后CSS属性混用moz样式时同一定义二选一优先使用了 moz的属性效果scrollbar-width显示为原生滚动条的缩小版scrollbar-color仅显示滚动条滑块和轨道颜色如需适配暗色主题必须此项但相比Firefox无active交互变化交互更为简化截至目前更新Chrome 121、Edge 121、Opera 107 各以上版本浏览器均已更新支持使用自定义为保留自定义滚动条效果、不可同时混用scrollbar-width/color属性为兼容Firefox火狐浏览器还需另加CSS设置/* moz样式分隔补加 */html.moz-scrollbar{scrollbar-width:thin;scrollbar-color:rgb(255,150,150)rgb(255,225,225);}// kernel: mozif(typeofdocument.mozFullScreen!undefined){document.body.parentNode.classList.add(moz-scrollbar);}2.2. 自定义问题 (页面滚动-步进抖动)js使用以下代码可以获取滚动条的位置 (适用于大多数主流浏览器)letscrollTopwindow.pageYOffset||document.documentElement.scrollTop||window.scrollY;webkit 内核的浏览器使用默认滚动条或更新支持的scrollbar-width标准定义方法获取到同一方向的滚动值是连贯有序的。虽然自定义滚动条样式早已有应用但最近遇到了一点问题这是以前未曾出现过的可能是与更新关联。(2024-06)问题描述PC端 webkit内核的浏览器在非滚轮滚动、即拖动滚动条同一方向 “向下/向上慢速滚动” 时 几率出现步进值变成步退值、尤其步退值变成步进值偏多打破了滚动逻辑、将出现与 “页面滚动来回切换” 相关的业务错误。移动端因不显示自定义滚动条无此问题出现问题定位使用了自定义滚动条样式、即在-webkit-scrollbar中的任意修改后页面滚动同一方向时几率出现步进值-1/步退值1从而出现了滚动值的不连续这是滚动条的自定义影响到了js的原生方法值折中处理页面的微小滚动需要确认是否为同一方向、滚动范围如何确定而过小范围滚动也可能存在用户操作情形、不能单一通过业务逻辑覆盖掉。letscrollingTimeoutnull;/** * 页面滚动 - 1步进抖动 (滑动抖动异常屏蔽) * description : 避免快速非常态切换迟滞感-高频切换 * param {Number} delay 延迟时间 * param {Function} sectionOnce 高频事件 (间歇执行) */functionscrollingSectionValid(delay,sectionOnce){if(scrollingTimeoutnull){sectionOnce();scrollingTimeoutsetTimeout((){clearTimeout(scrollingTimeout);scrollingTimeoutnull;},delay);}}暂时处理是采用延时器、其中只确认并执行一次业务其时限内用来屏蔽掉可能出现的滚动值偏差虽仍有偏差情形出现、但比处理前也是减轻了很多。问题修复据最新更新使用自定义滚动条样式的任意修改已不再有步进抖动问题 (2024-12)