如何为两个div元素设置不同的滚动条样式？

当然可以实现这个需求！你之前只在全局设置生效，大概率是因为直接使用了全局的滚动条伪元素，没有把样式和特定的div选择器绑定起来。下面分浏览器给你详细的实现方案：

WebKit内核浏览器（Chrome、Edge、Safari等） #

这类浏览器支持通过::-webkit-scrollbar系列伪元素定制滚动条，只要把这些伪元素和你的div类名/选择器结合，就能实现单独样式：

/* 第一个div的滚动条样式 */
.scrollbar-custom-1::-webkit-scrollbar {
  width: 8px; /* 垂直滚动条宽度 */
  height: 8px; /* 水平滚动条高度 */
}

.scrollbar-custom-1::-webkit-scrollbar-track {
  background: #f5f5f5; /* 滚动条轨道背景色 */
  border-radius: 4px;
}

.scrollbar-custom-1::-webkit-scrollbar-thumb {
  background: #999; /* 滚动条滑块颜色 */
  border-radius: 4px;
}

.scrollbar-custom-1::-webkit-scrollbar-thumb:hover {
  background: #666; /* 鼠标悬停时的滑块颜色 */
}

/* 第二个div的滚动条样式 */
.scrollbar-custom-2::-webkit-scrollbar {
  width: 12px;
}

.scrollbar-custom-2::-webkit-scrollbar-track {
  background: #2d3748;
}

.scrollbar-custom-2::-webkit-scrollbar-thumb {
  background: #4299e1;
  border-radius: 6px;
  border: 3px solid #2d3748; /* 给滑块加边框，和轨道形成区分 */
}

对应的HTML结构示例：

<div class="scrollbar-custom-1" style="width: 300px; height: 200px; overflow: auto;">
  <!-- 这里放第一个div的内容 -->
</div>

<div class="scrollbar-custom-2" style="width: 300px; height: 200px; overflow: auto;">
  <!-- 这里放第二个div的内容 -->
</div>

Firefox浏览器 #

Firefox用scrollbar-width和scrollbar-color两个专属属性来定制，同样可以针对单个div设置：

.scrollbar-custom-1 {
  scrollbar-width: thin; /* 可选值：auto/thin/none */
  scrollbar-color: #999 #f5f5f5; /* 顺序：滑块颜色 轨道颜色 */
}

.scrollbar-custom-2 {
  scrollbar-width: auto;
  scrollbar-color: #4299e1 #2d3748;
}

关键注意点 #

• 务必给目标div设置overflow: auto（或overflow: scroll），否则滚动条不会显示
• 尽量给每个div设置独特的类名，避免样式冲突被全局样式覆盖
• 上述方案覆盖了绝大多数现代浏览器，若需兼容极老浏览器，可能需要额外的垫片处理，但日常开发基本够用

内容的提问来源于stack exchange，提问作者Hugo S. Mendes