[2024 Update] Pure CSS Method

In CSS, traditional animations are defined by the @keyframes rule and then controlled by the animation property. These animations typically run on a timeline and are unrelated to the user scrolling the page. However, in Chrome version 115 or higher, the new CSS property animation-timeline: scroll(); is supported. This property allows you to link animations to scroll events, creating scroll-driven animation effects, which enables us to implement a page scrollbar using pure CSS.

scrollHeight, scrollTop, and clientHeight

This is a complete web page, where the height of the area within the red box (the visible area in the browser window) is clientHeight. The distance from the red box area to the top is scrollTop, and the total height of the web page is scrollHeight. Understanding these allows us to calculate the proportion of the current scrollbar position to the total page height: scrollTop / (scrollHeight - clientHeight). This ratio indicates the percentage of the page that the user has browsed.

Progress Bar

Here we use the progress bar from MDUI, but we need to add position: fixed in the style to make it float at the top of the page.

Adding Code

After including the relevant code on the page, add a JS and get the reading progress as described in the first part:

This will give you a reading progress bar.