前端滚动条自定义样式

一、CSS 基本选择器（针对浏览器滚动条）

1. ::-webkit-scrollbar

这个伪元素用于选择整个滚动条。可以设置滚动条的宽度、高度等基本属性。不过，需要注意的是，这种方式主要适用于 WebKit 浏览器（如 Chrome、Safari），对于其他浏览器可能需要不同的前缀或者不支持。

/* 自定义滚动条的宽度和背景颜色 */

::-webkit-scrollbar {

    width: 10px;

    background - color: #f5f5f5;

}

2. ::-webkit-scrollbar-thumb

用于选择滚动条的拖动部分（滑块）。可以设置滑块的颜色、形状、边框等属性。

::-webkit-scrollbar-thumb {

    background - color: #888;

    border - radius: 5px;

}

3. ::-webkit-scrollbar-track

选择滚动条的轨道部分，即滑块滑动的轨道。可以设置轨道的背景颜色等属性。

::-webkit-scrollbar-track {

    background - color: #f5f5f5;

}

二、自定义滚动条在不同浏览器中的兼容性处理

1. Firefox 浏览器

Firefox 使用不同的 CSS 属性来定制滚动条。通过`scrollbar-width`和`scrollbar-color`属性来控制滚动条的宽度和颜色组合。不过，这些属性的支持相对较新，并且可能在一些旧版本中不可用。

/* Firefox中设置滚动条宽度和颜色组合 */

scrollbar-width: thin;

scrollbar-color: #888 #f5f5f5;

2. IE 浏览器（旧版本）

旧版本的 IE 浏览器对滚动条样式的自定义支持有限。在一些较新的 IE 版本中，可以通过一些非标准的 CSS 属性（如`-ms-overflow-style`）来进行部分定制，但总体上实现的效果和兼容性不如现代浏览器。通常在实际开发中，如果需要考虑 IE 浏览器，可能需要通过 JavaScript 插件或者其他复杂的技术来模拟滚动条样式。

3. 使用 JavaScript 插件实现更高级的自定义滚动条（如 OverlayScrollbars）

3.1 插件介绍

OverlayScrollbars 是一个流行的 JavaScript 滚动条自定义插件。它提供了跨浏览器的滚动条自定义解决方案，不仅可以定制滚动条的外观（如颜色、尺寸、形状等），还可以添加动画效果、支持触摸设备等高级功能。

3.2 使用步骤

安装

npm install overlay-scrollbars

给需要自定义滚动条的元素添加一个特定的类或者`id`

<div id="custom-scroll-element"></div>

import OverlayScrollbars from "overlay-scrollbars";

// 或者如果是通过script标签引入，使用全局变量OverlayScrollbars

const element = document.getElementById("custom-scroll-element");

OverlayScrollbars(element, {

  scrollbars: {

    autoHide: "leave",

    autoHideDelay: 800,

    width: "8px",

    backgroundColor: "#f5f5f5",

    borderRadius: "4px",

    hoverStyle: "thumb-over-auto-hide",

  },

});