js monitor page scrolling

js monitor page scrolling

When you want to view the list data loaded by paging in the project, especially on the mobile side, there are often scenarios where you slide to the bottom to load more scenes, which can be realized by scrolling and monitoring.

code show as below:

window.addEventListener('scroll', this.handleScroll, true)

handleScroll () {
            let scrollTop = document.getElementsByClassName('滚动的元素')[0].scrollTop;
            console.log('【滚动距离】', scrollTop);
            let ch = document.getElementsByClassName('strategy-box')[0].clientHeight;
            console.log('【可视区域】', ch);
            let sh = document.getElementsByClassName('strategy-box')[0].scrollHeight;
            console.log('【滚动条高度】', sh);
            /*scrollTop + ch = sh*/
        }

A little explanation:
addEventListener monitors the scrolling, binds the trigger function handleScroll, and executes the event code.
Scrolling distance scrollTop + visible area height ch = total height sh

Significance: When scrolling distance scrollTop + visible area height ch = total height sh, the scroll bar scrolls to the bottom, and related event codes can be executed, such as the list scrolls to the bottom to automatically load more, etc.

end

It is more general and simple, if it is helpful to you, remember to like it (~~)