Custom scroll bars
Generally when comes to replacing native UI components, I'm strongly against it. But, we've all been there, when the client insists on it.
You'll see how to style it via CSS (webkit only), apply pure JavaScipt plugin with native scrolling or apply simple CSS hack.
Well, let's go :)
Webkit scrollbars can be styles via CSS. This is great, but still not cross browser. CSS tricks has a great article on it.
You can use pseudo selectors, these ones are used in the demo:
Check jsfiddle demo with green-ish scrollbars webkit only.
This one I wrote years ago, and it is fully supporting IE8. It needs some love, as it should updated with I have learned since then.
Using browser native scroll so it is smooth as you can get. Scrollbars are customizable via CSS.
Check the demo.
Grab the code on GitHub.
- Idea - Show scrollbars only on mouse hover.
- Problem - content will be shrunk for the width of the scrollbar on hover, and jump.
We are going to exploit the fast that all of the browsers have sub 20px wide scrollbar. This demo is using two divs, outer one which will be scrolled, and content wrapped in the inner one. Just put
overflow: hidden on the outer div, and on mouse hover, switch to
overflow: scroll Having inner div smaller for 20px, you will be able to create enough space for the scroll bar, and content won't jump around.
You'll need to add modernizr, or some other way to detect touch devices. That's why we are using
overflow-y: scroll by default. Scrolling on touch devices is already nice and smooth.
/* no-touchevents class is added by modernizr
* as we don't want to apply this on touch devices */
Check demo on CodePen (please note that demo was updated to work without modernizr).