没有jquery的自定义滚动条答案

【问题标题】：custom scrollbar without jquery没有jquery的自定义滚动条
【发布时间】：2026-01-17 20:05:01
【问题描述】：

我正在寻找一个没有 jquery 的自定义滚动条。我不能使用 jquery，因为其他东西也是 jqueryless 并且它针对快速加载进行了优化。

如果有任何想法与我分享，我将不胜感激。

不知道

【问题讨论】：

指定你想要自定义的滚动条。你可以只用 CSS 做一些事情。
是的，我知道我可以只使用 css 来设置 webkit 滚动条的样式。但我需要的不仅仅是风格。滚动条必须在 android 或 ios 上的内容上方。
在这里查看我的答案：*.com/questions/27322881/…
在这里查看我的答案：*.com/questions/7357203/custom-scrollbars/…

标签： javascript scrollbar

【解决方案1】：

如果您不想使用 jQuery，您可以随时尝试 CSS（仅适用于 WebKit）。

JSFIDDLE

示例 CSS：

::-webkit-scrollbar {
    width: 15px;
}

::-webkit-scrollbar-track {
   -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
   background-color: #000000;
}

::-webkit-scrollbar-thumb {
   border-radius: 10px;
   -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
   background-color: #555555;
}

::-webkit-scrollbar-button {
   -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
   background-color: #000000;
   background-image: url(dark/light-blue/images/ui-icons_0990fb_256x240.png);
}

::-webkit-scrollbar-button:vertical:increment {
   background-position: -64px -16px;
}

::-webkit-scrollbar-button:vertical:decrement {
   background-position: 0 -16px;
}

::-webkit-scrollbar-button:horizontal:increment {
   background-position: -32px -16px;
}

::-webkit-scrollbar-button:horizontal:decrement {
   background-position: -96px -16px;
}

::-webkit-scrollbar-corner {
   background-color: #000000;
}