This Easy element adds a scrollbar to the page, showing the current scroll progress.
Type: String
The color of the scroll bar background and progress bar.
default: '#0a3bad'
Type: Boolean
Determines if the scroll bar is horizontal (true) or vertical (false).
Required for correct positioning.
default: true
Type: String
The thickness (height or width) of the bar, including units.
default: '10px'
<div
data-controller="easy-scroll-bar"
data-easy-scroll-bar-thickness-value="15px"
></div>Type: Number (range)
The opacity of the scroll bar background.
Must be a value between 0.0 and 1.0.
default: .5
Type: Number
Throttle interval (in milliseconds) for scroll event handling.
default: 10
Type: Number
Margin from the edge of the screen to the bar, in pixels.
default: 10
Type: String
CSS unit for margin and thickness values (e.g., 'px', '%').
default: 'px'
Type: String (keyword)
Bar position relative to the viewport edge ('top', 'bottom', 'left', 'right').
default: 'top'
Type: Number (range)
Length of the bar as a percentage of its container (0-100).
default: 80
Type: Boolean
If true, renders rounded corners on the bar.
default: true
Type: Boolean
If true, displays the numerical scroll progress as text.
Only works for horizontal bars.
default: false
Type: String
The color of the progress text.
default: '#fff'