How to determine whether the scroll bar rolled JS bottom

Analyzing the scroll bar in the end portion, three properties need to use DOM, i.e. scrollTop, clientHeight, scrollHeight.

 

scrollTop scroll bar to scroll to the distance on the Y axis.

 

clientHeight a highly visible area of ​​the content.

 

scrollHeight visual content plus the distance of the height of the overflow area (scroll) a.

 

From the introduction of three properties can be seen, the conditions in the end part of the scroll bar is the scrollTop + clientHeight == scrollHeight.

 

Code is as follows (compatible with different browsers).

let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
let clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
let scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;

if(scrollTop + clientHeight === scrollHeight) {
}