WEB 页面滚动条 相关操作

实例：当滚动条滚动到页面底部时，执行相应的函数

      方法一：

$(window).on('scroll', function () {

    if (that.scrollTimer) {

        clearTimeout(that.scrollTimer);

    }

    that.scrollTimer = setTimeout(function(){

    var $doc = $(document);

    if(!that.isPending && ($doc.height() - ($(self).height()+$doc.scrollTop())<= that.loadMoreScroll)){

        function(){ …… }

    }

    }, that.scrollDelay);

});

方法二：

$(document).ready(function() {

    $(window).scroll(function() {

 

        if ($(document).scrollTop()<=0){

            alert("滚动条已经到达顶部为0");

        }

 

        if ($(document).scrollTop() >= $(document).height() - $(window).height()) {

            alert("滚动条已经到达底部为" + $(document).scrollTop());

        }

    });

});

注：

    $doc = $(document)：获取当前页面元素的jQuery对象

    $doc.height()：当前页面高度

    $(self).height()：滚动条高度

    $doc.scrollTop()：滚动条距页面顶端的长度

    正常情况下，当滚动条滚动到页面底部时：$doc.height() = $(self).height() + $doc.scrollTop()

扩展：

    1、scrollTop()函数用于设置或返回当前匹配元素相对于垂直滚动条顶部的偏移。

    

    当一个元素的实际高度超过其显示区域的高度时，在一定的设置下，浏览器会为该元素显示相应的垂直滚动条。此时，scrollTop()返回的就是该元素                        在可见区域之上被隐藏部分的高度(单位：像素)。

    如果垂直滚动条在最上面(也就是可见区域之上没有被隐藏的内容)，或者当前元素是不可垂直滚动的，那么scrollTop()将返回0。