How to Determine Vertical Scroll Percentage Cross-Browser?

Cross-Browser Determination of Vertical Scroll Percentage

Determining the percentage of the vertical scrollbar a user has moved through is a crucial task in web development. This article investigates a method for achieving this cross-browser compatible in modern browsers.

Using the 'onscroll' event and accessing either documentElement.scrollTop or body.scrollTop, we can obtain the current position of the scrollbar. Additionally, documentElement.scrollHeight or body.scrollHeight provides the total height of the scrollable area.

By combining these values, we can calculate the scroll percentage as follows:

<code class="javascript">var percent = (h[st] || b[st]) / ((h[sh] || b[sh]) - h.clientHeight) * 100;</code>

Where:

• h is the documentElement object
• b is the body object
• st is the scrollTop property
• sh is the scrollHeight property

This method provides an accurate and cross-browser compatible solution for determining the vertical scroll percentage. It works well in Chrome, Firefox, and IE9 , with the exception that it may not reach exactly 100% on some mobile browsers due to auto-hide-on-scroll behavior in the browser UI.

The above is the detailed content of How to Determine Vertical Scroll Percentage Cross-Browser?. For more information, please follow other related articles on the PHP Chinese website!