码迷,mamicode.com
首页 > 其他好文 > 详细

一次滚一屏

时间:2017-05-23 23:50:24      阅读:175      评论:0      收藏:0      [点我收藏+]

标签:default   htm   dem   nbsp   range   content   null   var   ack   

//demo

<style>
    html,body {height:100%;}
    body {margin:0px;}
    div {height:100%;}
</style>
<body>
    <div style="background:red;"></div>
    <div style="background:yellow;"></div>
    <div style="background:orange;"></div>
</body>
<script>

addEventListener("DOMContentLoaded",function(){
    var body=document.body,html=document.documentElement;
    var itv,height=document.body.offsetHeight;
    //var page=scrollTop()/height|0;//取整
    var page=parseInt(scrollTop()/height);
    

    //窗口大小改变事件
    addEventListener("resize",onresize)//,onresize();
    
    //滚轮事件
    document.body.addEventListener("onwheel" in document?"wheel":"mousewheel",
        function(e){
            clearTimeout(itv);
            itv=setTimeout(function(){
                var delta=e.wheelDelta/120||-e.deltaY/3;
                page-=delta;
                var max=(document.body.scrollHeight/height|0)-1;
                if(page<0)return page=0;
                if(page>max)return page=max;
                move();
            },100);
            e.preventDefault();
        }
    );
    //平滑滚动
    function move(){
        var value=height*page;
        var diff=scrollTop()-value;
        (function callee(){
        diff=diff/1.2|0;
        scrollTop(value+diff);
        if(diff)itv=setTimeout(callee,16);
        })();
    };
    //resize事件
    function onresize(){
        height=body.offsetHeight;
        move();
    };
    //获取或设置scrollTop
    function scrollTop(v){
        if(v==null)return Math.max(body.scrollTop,html.scrollTop);
        else body.scrollTop=html.scrollTop=v;
    };
});
</script>

 

一次滚一屏

标签:default   htm   dem   nbsp   range   content   null   var   ack   

原文地址:http://www.cnblogs.com/hangsarea/p/6896591.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!