在网站设计的很多时候，应用到某个区域自动产生滚动条，所产生的好处可不少：
1. 用户体验
内容完整性：当内容超出 div 容器的可视区域时，自动生成滚动条可以确保用户能够查看所有内容，而不会丢失任何部分。
导航便利：滚动条提供了一种直观的导航方式，用户可以轻松滚动查看完整的内容，而无需其他复杂的交互。
2. 保持布局一致性
控制容器大小：通过设置固定的容器高度或宽度，并允许滚动条出现，可以保持页面布局的一致性，而不会因为内容的大小变化影响到整体布局。
避免溢出问题：自动生成滚动条可以防止内容溢出容器，确保页面布局的整洁性和稳定性。
3. 提高页面可用性
适应不同内容量：无论内容多少，容器都会提供滚动条以适应内容变化，使页面在各种内容量下都能保持良好的显示效果。
改善响应性：在响应式设计中，可以为不同的设备和视口大小设置自动滚动条，从而确保在各种屏幕上都能提供良好的用户体验。
4. 减少页面重绘
避免内容重排：自动生成滚动条可以避免在页面上动态添加或删除内容时导致的页面重排（reflow）问题，提高页面性能。
5. 增强可访问性
提升可达性：提供滚动条可以让所有用户，包括使用辅助技术的用户，能够访问和浏览所有内容。
兼容性：自动生成滚动条的方式在现代浏览器中普遍支持，可以确保较好的跨浏览器兼容性。

这次我在写一个主题的同时，应用到迷你版的滚动条样式，效果不错！之前就只是懂得应用 css 来定义，这次特意用 js 和 css 相配合来定义，效果明显且不复杂，发出来发夹一起学习学习：

(function () {
  /**
   * 设置滚动条样式的函数
   * @param {Object} options - 自定义滚动条的选项
   * @param {string} options.selector - 目标区域的选择器
   * @param {string} options.width - 滚动条的宽度（例如 "10px"）
   * @param {string} options.trackImage - 滚动条轨道的背景图像
   * @param {string} options.thumbColor - 滚动条滑块的颜色
   * @param {string} options.cornerColor - 滚动条角落的颜色
   * @param {string} options.thumbHoverColor - 滚动条滑块悬停时的颜色
   */
  function setScrollbarStyle(options) {
    const { selector, width, trackImage, thumbColor, cornerColor, thumbHoverColor } = options;

    // 创建样式字符串
    const scrollbarStyle = `
      /* For WebKit browsers */
      ${selector}::-webkit-scrollbar {
        width: ${width}; /* 滚动条宽度 */
      }
      ${selector}::-webkit-scrollbar-track {
        background: url('${trackImage}');
        background-size: cover;
      }
      ${selector}::-webkit-scrollbar-thumb {
        background-color: ${thumbColor};
        border-radius: 10px;
        border: none; /* 去掉边框 */
      }
      ${selector}::-webkit-scrollbar-thumb:hover {
        background-color: ${thumbHoverColor};
      }
      ${selector}::-webkit-scrollbar-corner {
        background: ${cornerColor};
      }

      /* For Firefox */
      @-moz-document url-prefix() {
        ${selector} {
          scrollbar-width: thin; /* 滚动条宽度 */
          scrollbar-color: ${thumbColor} transparent; /* 滚动条滑块和轨道的颜色 */
        }
      }
    `;

    // 创建一个 style 元素并插入到页面中
    const styleElement = document.createElement("style");
    styleElement.innerHTML = scrollbarStyle;
    document.head.appendChild(styleElement);

    // 为 Firefox 轨道设置背景图像的模拟
    const container = document.querySelector(selector);
    if (container) {
      container.style.background = `url('${trackImage}') no-repeat center center`;
      container.style.backgroundSize = 'cover';
    }
  }

  // 示例调用
  setScrollbarStyle({
    selector: ".tab-content",
    width: "10px",          // 滚动条宽度
    trackImage: "http://127.0.0.1/wp-content/plugins/tab_swiche/scrollbar-bg.png", // 轨道背景图像
    thumbColor: "#313131",  // 滑块颜色
    thumbHoverColor: "#515151", // 滑块悬停时颜色
    cornerColor: "#191919"  // 角落颜色
  });
})();

同时， 兼容 FireFox 的 Css 如下：

/* Firefox 特定样式 */
@-moz-document url-prefix() {
  .tab-content {
    scrollbar-width: thin; /* or 'auto' or 'none' */
    scrollbar-color: #313131 #191919;
  }
}

/* Hides arrows in Firefox for specific areas */
@-moz-document url-prefix() {
  .tab-content {
    scrollbar-color: #313131 #191919;
    scrollbar-width: thin;
  }
}

前端直接调用即可！代码中提到的类 .tab-content， 请按照自己的实际情况进行更改！提及到的本地的图片作为滚动条轨道的背景，建立一个较高的元素，宽为 11px 的透明背景图，中间画一道 1px 的竖线，颜色自己去根据背景配色，保存为 png 图像再加以引用即可！

注意：火狐浏览器（FireFox）的背景暂时不支持，可以的话请用第三方库！