Jquery判断滚动条是否到达窗口顶部和底部

浏览数：41 / 时间：2015年06月09日

<script type="text/javascript">
$(document).ready(function(){
    alert($(window).height()); //浏览器时下窗口可视区域高度
    alert($(document).height()); //浏览器时下窗口文档的高度
    alert($(document.body).height());//浏览器时下窗口文档body的高度
    alert($(document.body).outerHeight(true));//浏览器时下窗口文档body的总高度 包括border padding margin

    alert($(window).width()); //浏览器时下窗口可视区域宽度
    alert($(document).width());//浏览器时下窗口文档对于象宽度
    alert($(document.body).width());//浏览器时下窗口文档body的高度
    alert($(document.body).outerWidth(true));//浏览器时下窗口文档body的总宽度 包括border padding margin
    
    var win_height=$(window).height();
    var doc_height=$(document).height();
    var scroll_top=$(document).scrollTop();
    
    /*
    doc_height是文档的高度，scroll_top是滚动条上部离文档顶部的高度，window_height表示窗口高度。
    当scroll_top = 0 时，表示滚动条已经到达窗口顶部。
    当scroll_top + window_height >= doc_height 时，表示滚动条已经到达窗口底部。
    */

    //判断滚动条是否到达窗口底部
    $(window).bind(‘scroll‘, function(){    //绑定滚动事件
        if($(document).scrollTop() + $(window).height() >= $(document).height()){
            console.log(win_height);
            console.log($(document).scrollTop());
            console.log(doc_height);
            //......
        }
    });     
});
</script>

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。