Custom scrollbar without jquery

Question

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

I would be grateful for any ideas that I like.

Nonnnnn

Answer 1

If you don't want to use jQuery, you can always try CSS (works only in WebKit).

JSFIDDLE

CSS example:

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

Learn more about custom WebKit scrollbars.

If you need support for multiple browsers, you'll want to use jQuery or write your own javascript code with the addition of a div for the scroll bar and the addition of event handlers to know when you scroll.

Custom Scroll Code Example

Answer 2

Good for people who are also looking for a good scroll bar with no dependencies:

You can use IScroll if you need a little more than just a scroll bar or Gemini Scrollbar , which is absolutely amazing and uses the natural scroll behavior.