Scrollbar demo

First, define the controller for the scrollbar.

<div data-controller="easy-scroll-bar"></div>

Position

The bar can be placed on any of the four sides of the viewport: top, bottom, left, or right.

Set the 'horizontal' option to false when positioning the bar on the left or right side.

Note: The 'showProgress' setting only works with horizontal bars.

<div
data-controller="easy-scroll-bar"
data-easy-scroll-bar-horizontal-value="false"
data-easy-scroll-bar-position-value="left"
></div>

To place the bar vertically on the left side of the page, use position: 'left' and set horizontal: false.

Styling the bar

There are various settings available to style the bar according to your needs.

The primary styling options include: 'color', 'thickness', 'margin', 'unit', 'length', and 'roundCorners'.

<div
data-controller="easy-scroll-bar"
data-easy-scroll-bar-color-value="#db1200"
data-easy-scroll-bar-thickness-value="15px"
data-easy-scroll-bar-margin-value="2"
data-easy-scroll-bar-unit-value="rem"
data-easy-scroll-bar-length-value="60"
></div>

Setting the bar to red, with a thickness of 15px, a margin of 2rem from the page border, and a width of 60% relative to its parent is possible by adjusting these settings.

IMPORTANT: The bar’s position may be affected by its parent element.

Additional configuration

You can increase the throttle interval to reduce computation and improve performance.

If the bar is horizontal, it can display the current scroll progress as text.

<div
data-controller="easy-scroll-bar"
data-easy-scroll-bar-throttle-value="15"
data-easy-scroll-bar-show-progress-value="true"
data-easy-scroll-bar-text-color-value="#db1200"
></div>

Setting the throttle to 15ms controls how frequently the bar position is updated.

Using a red text color will show the scroll progress in red.