Actions
Switch Theme
Getting startedInstallation
Basics
SocialsYouTube
Facebook
Jose Tamu
July 16, 2024 /  Beginner

Scrollbar

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam molestie dictum fermentum. Morbi at maximus tellus, vitae imperdiet libero. Donec tincidunt tristique neque, eget pulvinar quam dapibus sed. Nulla sagittis velit magna, quis scelerisque ligula sodales in. Proin et porttitor neque. Praesent at eros sed tortor luctus congue quis nec arcu. Pellentesque varius tristique dui, rhoncus aliquam risus consequat fermentum. Nam tincidunt, dolor eget sollicitudin porttitor, leo lorem mollis lacus, et ullamcorper orci eros sed elit. Donec vulputate nec lorem non sollicitudin. Curabitur varius sapien sit amet mollis condimentum. Aenean ut laoreet orci, at consequat felis. Mauris elementum metus quis tempor ornare. Donec dictum facilisis justo ac fringilla. Maecenas quis nisl non lectus varius eleifend. Praesent vitae erat dapibus, ultricies diam ut, ullamcorper neque. Duis vitae venenatis dolor.

How it works

Scrolbar element will style native scrollbar element, it won’t replace it.
Scrollbar element requires an overflow at the element where it is applied, otherwise there is no native scrollbar to display.

Settings controls

Target: select an element by it’s classname where the scrollbar element will adopt the native scrollbar behaviour.
OverflowY/OverflowX: select a “scroll” or “hidden” state for the vertical or horizontal scroll of the target.
Visibility: wether to display or not the scrollbar visibility.
Autohide: there are 4 types available:
Never: always shows the scrollbar.
Scroll: shows the scrollbar only when a scroll hit is produced.
Leave: hides the scrollbar when the user leaves the site.
Move: shows the scrollbar only when a scroll hit is produced or a cursor move.
Autohide delay: if there is an autohide option enable, here you can set a delay value for it.
Scrollbar styles: here you can design the track and thumb styles including it’s hover and active states. At the track, horizontal padding will set distance regarding left/right and vertical padding will set distance regarding top/bottom of the element targeted.

– Tamu

On this page