移动端js判别滚到底部

在pc端，当我用js判别滚到页面底部以致来触发函数进行异步加载数据时，一般的做法是：

获取浏览器页面的可视窗口高度-------windowHeight,

获取页面文档的高度---------bodyHeight,

获取页面滚动上去的内容的高度--------scrolltop,

假设windowHeight=1000,bodyHeight=2000,当我页面卷去1000的高度时，就可以确定已经滚到最底部，这是就可以触发某个函数去请求更多数据来渲染上页面。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no,target-densitydpi=device-dpi">
        <title></title>
        <style type="text/css">
            body{margin:0;}
            i{
                display:block;
                width: 100%;
                height: 0px;
                background-color:black;
            }
            #show{
                position:fixed;
                top:0;
                left:0;
                background:black;
                color:white;
            }
            .div{
                margin:0;
                padding:0;
                width:100px;
                height:100px;
                background:#ccc;
            }
        </style>
    </head>
    <body>
        <div id="wrapper">
            <div id="show"></div>
            <div class="div"></div>
            <div class="div"></div>
            <div class="div"></div>
            <div class="div"></div>
            <div class="div"></div>
            <div class="div"></div>
            <div class="div"></div>
            <i id="bodyheight"></i>
        </div>
        <script type="text/javascript" src="js/zepto.js"></script>
        <script type="text/javascript">
            var scrolltop,
                html,
                iheight,
                bodyheight,
                windowheight = $(window).height();
            $(window).bind("touchmove",function() {
                iheight = $("#bodyheight").offset().height;
                bodyheight = $("#bodyheight").offset().top;


                scrolltop = document.documentElement.scrollTop || document.body.scrollTop;
                html = '<p>窗口高度为windowheight '+windowheight+'</p><p>滚动的高度scrolltop '+scrolltop+'</p><p>i的高度iheight '+iheight+'</p><p>文档的高度bodyheight '+bodyheight+'</p>';
                $("#show").html(html);
            })
        </script>
    </body>   
</html>

　　

 

当我用同样的方法使用在webview的页面上时，出现了问题。可以明显看到pc浏览器跟移动端浏览器不同之处在于，移动端多了一条地址栏，当滚动的时候，在地址栏没消失之前，scrolltop是不进行计数的。

这样的话，按照上面的代码，windowHeight+scrolltop永远也小于bodyHeight。

一开始的时候，我不知道如何解决，试着去给scrolltop增加一定的数值，以致于滚到最低时跟windowHeight相加能等于bodyHeight,但是地址栏有些浏览器是没有的，有些浏览器是有的，这样的话这个笨笨的方法是行不通的。

通过一番的调试，最后发现windowHeight在移动端是会改变值的，也就是地址栏滚上去的时候，windowHeight也会随着增加，所以代码如下写就解决问题了

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no,target-densitydpi=device-dpi">
        <title></title>
        <style type="text/css">
            <!--body{margin:0;}-->
            i{
                display:block;
                width: 100%;
                height: 0px;
                background-color:black;
            }
            #show{
                position:fixed;
                top:0;
                left:0;
                background:black;
                color:white;
            }
            .div{
                margin:0;
                padding:0;
                width:100px;
                height:100px;
                background:#ccc;
            }
        </style>
    </head>
    <body>
        <div id="wrapper">
            <div id="show"></div>
            <div class="div"></div>
            <div class="div"></div>
            <div class="div"></div>
            <div class="div"></div>
            <div class="div"></div>
            <div class="div"></div>
            <div class="div"></div>
            <i id="bodyheight"></i>
        </div>
        <script type="text/javascript" src="js/zepto.js"></script>
        <script type="text/javascript">
            var scrolltop,
                html,
                iheight,
                bodyheight,
                windowheight;
            $(window).bind("touchmove",function() {
                windowheight = $(window).height();
                iheight = $("#bodyheight").offset().height;
                bodyheight = $("#bodyheight").offset().top;


                scrolltop = document.documentElement.scrollTop || document.body.scrollTop;
                html = '<p>窗口高度为windowheight '+windowheight+'</p><p>滚动的高度scrolltop '+scrolltop+'</p><p>i的高度iheight '+iheight+'</p><p>文档的高度bodyheight '+bodyheight+'</p>';
                $("#show").html(html);
            })
        </script>
    </body>   
</html>

　　

posted @ 2014-07-27 14:08  outside  阅读(1865)  评论(1)    收藏  举报