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
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).
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.
Ok, for peoples who are looking also for a nice scrollbar without dependencies:
You can use IScroll if you need a bit more than just a scrollbar or the Gemini Scrollbar, which is absolutely amazing and uses native scrolling behaviour.