滚动条判断是否滑动到顶部底部

最新推荐文章于 2023-09-11 15:47:02 发布

转载最新推荐文章于 2023-09-11 15:47:02 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://yq.aliyun.com/articles/658312

文章标签：

#javascript #c/c++ #java #ViewUI

本文介绍了一种使用JavaScript实现的滚动条触底监测方法。通过监听窗口滚动事件，获取滚动条距离顶部的高度、当前页面的总高度及当前可视的页面高度，判断是否滚动到底部或顶部，并触发相应的提示。

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

    /**
     * [滚动条]
     */
    $(window).scroll(function() {

        var scrollTop = $(this).scrollTop(); // 滚动条距离顶部的高度
        console.log("滚动条距离顶部的高度-->" + scrollTop);

        var scrollHeight = $(document).height(); // 当前页面的总高度
        console.log("当前页面的总高度-->" + scrollHeight);

        var clientHeight = $(this).height(); // 当前可视的页面高度
        console.log("当前可视的页面高度-->" + clientHeight);

        if (scrollTop + clientHeight >= scrollHeight) { // 距离顶部高度+可视高度 >= 文档总高度 即代表滑动到底部         

            // code...
            alert('已经到底了！');

        } else if (scrollTop <= 0) {

            // code...
            alert('已经到顶了！');

        }

    });