如何为设置overflow-y:scroll的div应用自定义滚动条样式？

解决方案 #

嘿，这个问题其实很容易解决——你现在的核心问题是滚动条样式的选择器和目标div不匹配，原来的CSS是针对id="style-1"的元素，但你的滚动div用的是class="something"，只需要调整选择器，再补全一下滚动条的完整样式（比如滑块部分），就能实现你想要的效果了。

完整的CSS代码 #

/* 你的原div基础样式 */
.something {
  height: 200px;
  overflow-y: scroll;
}

/* 针对.something类的自定义滚动条样式 */
.something::-webkit-scrollbar {
  width: 12px; /* 自定义滚动条的宽度 */
}

.something::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  background-color: #F5F5F5;
}

.something::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: #555; /* 滚动滑块的颜色，可自行调整 */
}

关键说明 #

1. 选择器匹配：把滚动条相关样式的前缀从#style-1换成.something，这样样式就会精准作用到带有something类的滚动div上；
2. 补全滑块样式：只定义轨道样式的话，滚动滑块还是浏览器默认样式，所以补充了::-webkit-scrollbar-thumb的样式，让整体风格统一；
3. HTML无需改动：你现有的HTML结构和jQuery引入都不需要调整，直接把上面的CSS替换掉原来的代码就行。

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