Firefox浏览器中如何修改滚动条高度？

你在Chrome中通过::-webkit-scrollbar系列伪元素实现了自定义滚动条样式，但Firefox不支持这些WebKit专属属性，以下是适配Firefox的解决方案：

1. Firefox原生支持的基础样式调整 #

Firefox 64及以上版本支持两个CSS属性，可快速调整滚动条基础样式：

• scrollbar-width：控制滚动条宽度，可选值为auto（默认）、thin（细滚动条）、none（隐藏滚动条但保留滚动功能）
• scrollbar-color：设置滚动条滑块与轨道的颜色，格式为[滑块颜色] [轨道颜色]

示例代码：

/* 给目标元素设置Firefox滚动条样式 */
.target-element {
  scrollbar-width: thin;
  scrollbar-color: #888 #eee;
}

2. 精细自定义（模拟滚动条） #

如果需要和Chrome中完全一致的精细样式（比如调整滑块高度、圆角等），可以通过「隐藏原生滚动条+JS模拟滚动」的方式实现：

• 隐藏原生滚动条：Firefox中用scrollbar-width: none;配合overflow: scroll;保留滚动功能
• 自定义滑块、轨道的DOM元素，通过监听滚动事件同步滑块位置，也可借助simplebar、perfect-scrollbar等第三方库简化开发

基础实现示例：

<div class="scroll-container">
  <div class="scroll-content">
    <!-- 页面内容 -->
  </div>
  <div class="custom-scrollbar">
    <div class="custom-scrollbar-thumb"></div>
  </div>
</div>

.scroll-container {
  position: relative;
  overflow: hidden;
  height: 400px;
}
.scroll-content {
  height: 100%;
  overflow-y: scroll;
  scrollbar-width: none; /* 隐藏Firefox原生滚动条 */
  padding-right: 20px; /* 给自定义滚动条预留空间 */
}
/* 可选：隐藏WebKit浏览器原生滚动条，统一使用自定义样式 */
.scroll-content::-webkit-scrollbar {
  display: none;
}
.custom-scrollbar {
  position: absolute;
  top: 0;
  right: 0;
  width: 8px;
  height: 100%;
  background-color: #eee;
  border-radius: 4px;
}
.custom-scrollbar-thumb {
  width: 100%;
  background-color: #888;
  border-radius: 4px;
  cursor: pointer;
  /* 后续通过JS动态设置高度与位置 */
}

最后通过JavaScript监听scroll-content的scroll事件，计算并同步滑块的高度与位置即可。

内容的提问来源于stack exchange，提问作者Zanashevich