DTD已声明


IE

  1. document.documentElement.scrollHeight 浏览器所有内容高度 ,
  2. document.body.scrollHeight 浏览器所有内容高度
  3. document.documentElement.scrollTop 浏览器滚动部分高度,
  4. document.body.scrollTop 始终为0
  5. document.documentElement.clientHeight 浏览器可视部分高度,
  6. document.body.clientHeight 浏览器所有内容高度

FF

  1. document.documentElement.scrollHeight 浏览器所有内容高度
  2. document.body.scrollHeight 浏览器所有内容高度
  3. document.documentElement.scrollTop 浏览器滚动部分高度
  4. document.body.scrollTop 始终为0
  5. document.documentElement.clientHeight 浏览器可视部分高度
  6. document.body.clientHeight 浏览器所有内容高度

Chrome

document.documentElement.scrollHeight      //浏览器所有内容高度
document.documentElement.clientHeight      //浏览器可视部分高度

document.body.scrollHeight      //浏览器所有内容高度
document.body.scrollTop      //浏览器滚动部分高度
document.body.clientHeight      //浏览器所有内容高度
document.documentElement.scrollTop     //始终为0

DTD未声明

IE

document.documentElement.scrollHeight      //浏览器可视部分高度
document.documentElement.clientHeight     //始终为0
document.documentElement.scrollTop     //始终为0

document.body.scrollHeight      //浏览器所有内容高度
document.body.scrollTop      //浏览器滚动部分高度
document.body.clientHeight      //浏览器可视部分高度

FF

document.documentElement.scrollHeight      //浏览器可视部分高度
document.documentElement.clientHeight      //浏览器所有内容高度

document.body.scrollHeight   //浏览器所有内容高度
document.body.scrollTop  //浏览器滚动部分高度

document.body.clientHeight  //浏览器可视部分高度
document.documentElement.scrollTop  //始终为0

Chrome

document.documentElement.scrollHeight //浏览器可视部分高度
document.documentElement.clientHeight //浏览器所有内容高度
document.body.scrollHeight  //浏览器所有内容高度
document.body.scrollTop //浏览器滚动部分高度
document.body.clientHeight //浏览器可视部分高度
document.documentElement.scrollTop //始终为0

判断滚动条是否已拉到页面最底部,可以用如下代码:

   window.onscroll = function () {

        var marginBot = 0;

        if (document.documentElement.scrollTop) {

            marginBot = document.documentElement.scrollHeight –- (document.documentElement.scrollTop+document.body.scrollTop) - document.documentElement.clientHeight;

        } else {

            marginBot = document.body.scrollHeight – document.body.scrollTop- document.body.clientHeight;

        }

        if(marginBot<=0) {

            // do something

        }

    }
 /********************
         * 取窗口滚动条高度 
         ******************/

        function getScrollTop() {

            var scrollTop = 0;

            if (document.documentElement && document.documentElement.scrollTop) {
                scrollTop = document.documentElement.scrollTop;
            } else if (document.body) {
                scrollTop = document.body.scrollTop;
            }

            return scrollTop;

        }


        /********************
        * 取窗口可视范围的高度 
        *******************/

        function getClientHeight() {

            var clientHeight = 0;

            if (document.body.clientHeight && document.documentElement.clientHeight) {
                var clientHeight = (document.body.clientHeight < document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight;
            } else {
                var clientHeight = (document.body.clientHeight > document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight;
            }

            return clientHeight;

        }


        /********************
         * 取文档内容实际高度 
         *******************/

        function getScrollHeight() {

            return Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);

        }

        function test() {
            if (getScrollTop() + getClientHeight() == getScrollHeight()) {
                alert("到达底部");
            } else {
                alert("没有到达底部");
            }
        }

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

<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>

results matching ""

    No results matching ""