移动端滚动翻页

<!DOCTYPE html>
<html ng-app="plunker">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
        <meta name="format-detection" content="telephone=no">
        <title>FrozenUI Demo</title>
        <link rel="stylesheet" href="css/frozen.css">
        <script type="text/javascript" src="js/angular.min.js"></script>
        <script>

            var app = angular.module('plunker', []);

            app.controller("slideController",function(){   

                var i=0;             

                window.onscroll = function(e){//滚动事件

                    var oScrollTop=document.body.scrollTop;//滚动条距离页面顶部高度(滚动了多少高度)
                    var oWindowHeight=document.documentElement.clientHeight;//可视区高度
                    var oDocumentHeight=document.documentElement.offsetHeight;//当前元素高度

                     // console.log(angular.element(document.documentElement.scrollTop));//火狐下获取滚动高度                    

                    if(oScrollTop==oDocumentHeight-oWindowHeight){//判断条件---滚动条距离页面顶部高度等于当前元素高度减去可视区高度
                        //业务逻辑
                        i++;
                        console.log(e);
                         console.log(angular.element(document.body.scrollTop));//chrome下获取滚动高度
                        angular.element(document.querySelector("p")).wrap( "<div class='new'>11111111111</div>" );                        

                    }
                };

            })

        </script>
    </head>    
    <body ng-controller="slideController">
        <p style="height:1000px">p</p>
        <!-- <p id="id1">id</p>
        <p class="class1">class</p> -->
    </body>
</html>

  

posted @ 2016-04-25 11:15  菜园子丶  阅读(580)  评论(0编辑  收藏  举报