javascript - 没有jquery的自定义滚动条

Question

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

将不胜感激与我分享的任何想法。

非NNNN

Answer 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;
}

更多关于 WebKit 自定义滚动条

如果您想要多个浏览器支持，您将需要使用 jQuery 或编写您自己的自定义 javascript 代码，为滚动条附加一个 div 并添加事件处理程序以了解您何时滚动。

自定义滚动条代码示例

Answer 2

好的，对于那些也在寻找一个没有依赖关系的漂亮滚动条的人：

如果您需要的不仅仅是滚动条​​或Gemini Scrollbar ，您可以使用IScroll，这绝对是惊人的并且使用原生滚动行为。