沒有jquery的自定義滾動條

Question

我正在尋找一個沒有jquery的自定義滾動條。 我不能使用jquery，因為其他東西也是jqueryless並且它針對快速加載進行了優化。

非常感謝與我分享的任何想法。

NONNNNN

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 Custom Scrollbars的更多信息

如果你想要多個瀏覽器支持，你將需要使用jQuery或編寫自己的自定義javascript代碼，為滾動條附加div並添加事件處理程序以了解滾動時間。

自定義滾動條代碼示例

Answer 2

好吧，對於那些正在尋找一個沒有依賴關系的漂亮滾動條的人們：

如果您需要的不僅僅是滾動條​​或Gemini滾動條 ，您可以使用IScroll ，這絕對是驚人的並且使用原生滾動行為。