Scrollbars
Custom JavaScript enabled scrollbars will display consistently across all browsers, giving you Mac OS style
scrollbars on any element.
Basic example
By default, the scrollbars will only be visible when the user hovers over the element or is scrolling on the element.
You can change this behavior by adding the .scrollbar-visible classname to the wrapper element.
The
JavaScriptcomponent will first check if the element hasoverflow(i.e the wrapper is not big enough to display its contents vertically). If the wrapper has nooverflow, the scrollbars won't be created.
To create an element with custom scrollbars, simply add the .js-custom-scroll classname
to the wrapper.
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Sed do eiusmod tempor incididunt
- Ut labore et dolore magna aliqua
- Ut enim ad minim veniam
- Consectetur adipiscing elit
- Sed do eiusmod tempor incididunt
- Ut labore et dolore magna aliqua
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
Styles
For elements with dark backgrounds, add the .scroll-light classname to the wrapper element
to make the scrollbars light.
Updates
The scrollbars are automatically updated whenever the browser is resized, maintaining the scroll position on the element. However if you add/remove content inside a scroll element, you will need to update the scroller manually.