没有jquery的自定义滚动条 [英] custom scrollbar without jquery

问题描述

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

I'm looking for a custom scrollbar that works without jquery. I can't use jquery because the other stuff is also jqueryless and it's optimized for fast loading.

感谢与我分享的任何想法。

Would be grateful for any ideas shared with me.

NONNNNN

推荐答案

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

If you don't want to use jQuery you could always attempt CSS (only works in 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并添加事件处理程序以了解滚动时间。

If you want multiple browser support you'll want to use jQuery or write your own custom javascript code with appending a div for the scrollbar and adding Event Handlers to know when you scroll.

自定义滚动条代码示例

这篇关于没有jquery的自定义滚动条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！