CSS全局滚动条样式兼容写法

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

css全局滚动条样式兼容写法实现

scss代码如下:

/* 滚动条样式 S */
$--scrollbar-track-color: rgba(0, 0, 0, 0.5);
$--scrollbar-thumb-color: transparent;

// for Mozilla
@-moz-document url-prefix() {
  * {
    scrollbar-color: $--scrollbar-track-color $--scrollbar-thumb-color !important;
    scrollbar-width: thin !important;
  }
}

// for IE
.ie {
  &, * {
    scrollbar-arrow-color: $--scrollbar-track-color; // 三角箭头的颜色
    scrollbar-face-color: $--scrollbar-track-color; // 滚动条滑块按钮的颜色
    scrollbar-track-color: $--scrollbar-thumb-color; // 滚动条轨道颜色
    scrollbar-shadow-color: transparent; // 滚动条阴影
    // scrollbar-highlight-color: #0099dd; // 滚动条整体颜色
    // scrollbar-3dlight-color:#0099dd; // 滚动条3d亮色阴影边框的外观颜色
    // scrollbar-darkshadow-color: #0099dd; // 滚动条3d暗色阴影边框的外观颜色
    // scrollbar-base-color: #0099dd; // 滚动条基准颜色
  }
}

// for Webkit
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background-color: $--scrollbar-track-color;
  &:hover {
    background-color: lighten($--scrollbar-track-color, 20%);
  }
}
::-webkit-scrollbar-track-piece {
  border-radius: 4px;
  background-color: $--scrollbar-thumb-color;
}
::-webkit-scrollbar-corner {
  background-color: $--scrollbar-thumb-color;
}
/* 滚动条样式 E */

IE 内核需要在页面开始处添加UA检测, 配合css已完成兼容Hack.

代码如下：

import UA from "ua-device";

const ua = new UA(navigator.userAgent);

const classList = document.documentElement.className.split(" ");
// 如果是ie浏览器添加 `.ie` class
if (ua.browser.name === "Internet Explorer") {
  classList.push("ie");
}
document.documentElement.className = classList.join(" ");

export default ua;

*: 由于Mozila 内核滚动条宽度 thin 等于8px, IE 内核滚动条宽度不可设置, Edge 浏览器滚动条不可修改. 所以为保证所有浏览器滚动条效果, 其他内核浏览器滚动条样式尽可能一致.