ToB企服应用市场:ToB评测及商务社交产业平台

标题: 使用CSS自界说欣赏器滚动条 (webkit 已最新支持 scrollbar-width) [打印本页]

---

作者: 八卦阵    时间: 2024-7-31 23:48
标题: 使用CSS自界说欣赏器滚动条 (webkit 已最新支持 scrollbar-width)
1. 自界说欣赏器滚动条CSS样式

欣赏器默认的滚动条样式简单醒目，而且差别的欣赏器下滚动条的样式也不一样，为了美观和统一必须修改滚动条的样式。
从滚动条效率和兼容性上选择，可以直接在默认滚动条的底子上进行样式修改。现已有更多相干详细设置的文章、本标题内容仅作概述及引用 不再赘述，如对本标题内容已有相识可直接跳转标题2 “webkit更新支持” 至本文正文。
基于 WebKit

MDN文档：::-webkit-scrollbar
::-webkit-scrollbar 仅在基于 Blink 或 WebKit 的欣赏器（比方 Chrome、Edge、Opera、Safari、iOS 上全部的欣赏器，以及其他基于 WebKit 的欣赏器）上可用。
使用以下伪元素选择器去修改基于 webkit 的欣赏器的滚动条样式：

1. ::-webkit-scrollbar                                /* 整个滚动条 */
2. ::-webkit-scrollbar-thumb                /* 滚动条上的滚动滑块 */
3. ::-webkit-scrollbar-button                /* 滚动条上的两端按钮（上下箭头）*/
4. ::-webkit-scrollbar-track                /* 滚动条轨道 */
5. ::-webkit-scrollbar-track-piece        /* 滚动条没有滑块的轨道部分 */
6. ::-webkit-scrollbar-corner                /* 右下角滚动条交汇处的拖动块（仅在同时有垂直和水平滚动条时）*/
7. ::-webkit-resizer                                /* 右下角可拖动调整大小的滑块 */

复制代码

Firefox

MDN文档：scrollbar-width、scrollbar-color
火狐欣赏器目前只提供了部分自界说滚动条的属性：

1. //定义滚动条的预定义宽度
2. scrollbar-width: auto;          /* 默认值 */
3. scrollbar-width: thin;          /* 比默认宽度更窄 */
4. scrollbar-width: none;          /* 不显示滚动条，但是依然可以滚动 */
6. //定义滚动条的颜色
7. scrollbar-color: auto;          /* 默认值 */
8. scrollbar-color: dark | light;  /* 显示深色或浅色滚动条，但并未实现 */
9. scrollbar-color: red green;     /* 第一个滚动滑块颜色，第二个滚动条轨道颜色 */

复制代码

详细设置参考文章：
欣赏器滚动条css样式设置（附示例）
自界说欣赏器滚动条样式（兼容chrome和firefox）

---

2.1 自界说CSS样式-webkit更新支持

关于界说欣赏器滚动条的CSS方法有两种：

• CSS选择器：-webkit-scrollbar 等 (以 -webkit- 内核为主的 Chrome等主流欣赏器)
  
• CSS属性：scrollbar-width、scrollbar-color (-moz- 内核的 Firefox火狐欣赏器)
  

查询支持：Can I use scrollbar
对比条件

• moz内核的 Firefox火狐欣赏器 专用"scrollbar-width/color"属性，不支持"-webkit-scrollbar"选择器
  
• 以webkit内核为主的 Chrome等主流欣赏器 专用"-webkit-scrollbar"选择器，不支持"scrollbar-width/color"属性
  

更新变化 (Chrome为例)

   最近更新开始支持 “scrollbar-width/color” 属性 (2024-01-23，Chrome 121及以上版本)

  

• Chrome 121版本之前，CSS属性可混用moz样式，实现同一界说下 webkit和moz的两种表现效果
  
  
  
  
• Chrome 121版本之后，CSS属性混用moz样式时，同一界说二选一 优先使用了 moz的表现效果
  
  
  
  • scrollbar-width 表现为原生滚动条的缩小版
    
  • scrollbar-color 仅表现滚动条滑块和轨道颜色，如需适配暗色主题必须此项，但相比Firefox 无"hover"和"active"交互变化！
    
    
    
    
  • 截至目前更新，Chrome 121、Edge 121、Opera 107 各以上版本欣赏器均已更新支持
    
  
  

使用自界说

为生存自界说滚动条效果、不可同时混用 scrollbar-width/color 属性！为兼容Firefox火狐欣赏器还需另加CSS设置：

1. /* moz样式分隔补加 */
2. html.moz-scrollbar{
3.         scrollbar-width: thin;
4.         scrollbar-color: rgb(255,150,150) rgb(255,225,225);
5. }

复制代码

1. // kernel: moz
2. if (typeof document.mozFullScreen !== "undefined") {
3.     document.body.parentNode.classList.add("moz-scrollbar");
4. }

复制代码

2.2. 自界说问题 (页面滚动-步进抖动)

js使用以下代码可以获取滚动条的位置 (适用于大多数主流欣赏器)：

1. var scrollTop = window.pageYOffset || document.documentElement.scrollTop || window.scrollY;

复制代码

webkit 内核的欣赏器使用默认滚动条或更新支持的 scrollbar-width 标准界说方法，获取到同一方向的滚动值是连贯有序的。
虽然自界说滚动条样式早已有应用，但最近遇到了一点问题，这是从前未曾出现过的，可能是与更新关联。

问题形貌

PC端 webkit内核的欣赏器在非滚轮滚动、即拖动滚动条同一方向 “向下/向上慢速滚动” 时 <几率出现步进值变成步退值、尤其步退值变成步进值偏多>，冲破了滚动逻辑、将出现与 “页面滚动往返切换” 相干的业务错误。
移动端因不表现自界说滚动条，无此问题出现！
问题定位

使用了自界说滚动条样式、即在 -webkit-scrollbar 中的恣意修改后，页面滚动同一方向时几率出现 步进值-1/步退值+1 从而出现了滚动值的不一连！这是滚动条的自界说影响到了js的原生方法值！
折中处理

页面的微小滚动需要确认是否为同一方向、滚动范围怎样确定，而过小范围滚动也可能存在用户操作情形、不能单一通过业务逻辑覆盖掉。

1. var scrollValidTimeout = null;
2. /**
3. * 页面滚动 - 1步进抖动【滑动抖动异常屏蔽】
4. * @param {Function} firstValidEvent 多次切换事件
5. */
6. function scrollingSectionValid (firstValidEvent) {
7.         // 避免快速非常态上下滚动页面时切换迟滞感/多频切换
8.         if (scrollValidTimeout == null) {
9.                 firstValidEvent();
10.                 scrollValidTimeout = setTimeout(function () {
11.                         clearTimeout(scrollValidTimeout);
12.                         scrollValidTimeout = null;
13.                 },100);
14.         }
15. }

复制代码

暂时处理是采用延时器、其中只确认并实行一次业务，其时限内用来屏蔽掉可能出现的滚动值毛病，虽仍有毛病情形出现、但比处理前也是减轻了很多，如有大佬有所相识或有更好方法的还望不吝赐教！

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

---

欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/)

Powered by Discuz! X3.4