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
If you don't want to use jQuery you could always attempt CSS (only works in WebKit).
JSFIDDLE
Example 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;
}
More on WebKit Custom Scrollbars
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.
Example of Custom Scrollbar Code
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With