js滚动条位置，顶部，底部，触发事件

最新推荐文章于 2025-06-17 14:58:29 发布

转载最新推荐文章于 2025-06-17 14:58:29 发布 · 3.7k 阅读

文章标签：

#javascript

js 专栏收录该内容

39 篇文章

订阅专栏

本文介绍了一个简单的JavaScript函数，用于监测网页滚动条的位置。通过比较窗口高度、文档高度及滚动条位置，可以判断用户是否处于页面顶部或底部。适用于前端开发者进行页面交互设计。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

function getScrollTop(){
    var scrollTop = 0, bodyScrollTop = 0, documentScrollTop = 0;
    if(document.body){
        bodyScrollTop = document.body.scrollTop;
    }
    if(document.documentElement){
        documentScrollTop = document.documentElement.scrollTop;
    }
    scrollTop = (bodyScrollTop - documentScrollTop > 0) ? bodyScrollTop : documentScrollTop;
    return scrollTop;
}
//文档的总高度
function getScrollHeight(){
    var scrollHeight = 0, bodyScrollHeight = 0, documentScrollHeight = 0;
    if(document.body){
        bodyScrollHeight = document.body.scrollHeight;
    }
    if(document.documentElement){
        documentScrollHeight = document.documentElement.scrollHeight;
    }
    scrollHeight = (bodyScrollHeight - documentScrollHeight > 0) ? bodyScrollHeight : documentScrollHeight;
    return scrollHeight;
}
function getWindowHeight(){
    var windowHeight = 0;
    if(document.compatMode == "CSS1Compat"){
        windowHeight = document.documentElement.clientHeight;
    }else{
        windowHeight = document.body.clientHeight;
    }
    return windowHeight;
}
window.onscroll = function(){
    if(getScrollTop() == 0){
        console.log('顶部')
    }
    if(getScrollTop() + getWindowHeight() == getScrollHeight()){
        console.log("已经到最底部了！!");
    }
};