PageProgress
A progress bar that displays the current reading position and triggers custom events based on the scroll position.
Usage
Add a .pageProgress to any page by adding the attribute yoi-pageprogress to the <body> element:
<body yoi-pageprogress> … </body>
Options
This element has only one option: visible. If set to false, the element won’t be rendered but the script will still run in the background and trigger custom events.
<body yoi-pageprogress="visible:false;"> … </body>
Events
| event | Fires when … |
|---|---|
yoi-scroll-0 |
The page scrolled to 0%. |
yoi-scroll-25 |
The page scrolled around 25%. |
yoi-scroll-50 |
The page scrolled around 50%. |
yoi-scroll-75 |
The page scrolled around 75%. |
yoi-scroll-100 |
The page scrolled to 100%. |
Please note, that all events but yoi-pageprogress-0 and yoi-pageprogress-100 are triggered multiple times in certain position ranges. For example yoi-pageprogress-100 is triggered while scrolling the page between 49%–55%.