如何使用 vanilla Javascript 检查用户是否滚动到页面底部

在许多网站上,滚动到底部通常表示“加载更多内容”。例如,在 facebook 或 instagram 上,滚动到页面底部会导致自动加载更多内容。

但是,您如何确定用户是否滚动到页面底部?使用 Javascript 非常容易。

如何检查用户是否滚动到底部#

要检查用户是否在页面底部,请使用以下代码:

document.addEventListener('DOMContentLoaded', function(e) {
    document.addEventListener('scroll', function(e) {
        let documentHeight = document.body.scrollHeight;
        let currentScroll = window.scrollY + window.innerHeight;
        // When the user is [modifier]px from the bottom, fire the event.
        let modifier = 200; 
        if(currentScroll + modifier > documentHeight) {
            console.log('You are at the bottom!')
        }
    })
})

不相信我?尝试滚动到此页面的底部以查看它的实际效果。