CSS 实现全屏滚动 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Stict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang = "zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>全屏滚动</title>
<style type="text/css">
html,body{  
    margin: 0;  
    padding: 0;  
}  
#wrap{  
    width: 100%;  
    overflow: hidden;  
    background: #ccc;  
}  
#main{  
    width: 100%;  
    background: #ccc;  
    position: relative;  
}  
.page{  
    width:100%;  
    margin:0;  
}  
#page1{  
    background:#E4E6CE;  
}  
#page2{  
    background:#6CE26C;  
}  
#page3{  
    background:#BF4938;  
}  
#page4{  
    background:#2932E1;  
}  
</style>
</head>
<body>
<div id="wrap">  
    <div id="main">  
        <div id="page1" class="page">page1</div>  
        <div id="page2" class="page">page2</div>  
        <div id="page3" class="page">page3</div>  
        <div id="page4" class="page">page4</div>  
    </div>      
</div>
<script>
    var pages = document.getElementsByClassName("page");  
    var wrap = document.getElementById("wrap");
    var len = document.documentElement.clientHeight;  
    var main = document.getElementById("main");  
    wrap.style.height = len + "px";  
    for(var i=0; i<pages.length; i++){  
        pages[i].style.height = len + "px";  
    }  
    if(navigator.userAgent.toLowerCase().indexOf("firefox") != -1){  
        document.addEventListener("DOMMouseScroll",scrollFun);  
    }else if(document.addEventListener){  
        document.addEventListener("mousewheel",scrollFun,false);  
    }else if(document.attachEvent){  
        document.attachEvent("onmousewheel",scrollFun);  
    }else{  
        document.onmousewheel = scrollFun;  
    }  
    var startTime = 0;  
    var endTime = 0;  
    var now = 0;  
    function scrollFun(e){  
        startTime = new Date().getTime();  
        var event = e || window.event;  
        var dir = event.detail || -event.wheelDelta;  
        if(startTime - endTime > 1000){  
            if(dir>0 && now > -3*len){  
                now -= len;   
                main.style.top = now +"px";  
                endTime = new Date().getTime();  
            }else if(dir<0 && now < 0){  
                now += len;  
                main.style.top = now +"px";  
                endTime = new Date().getTime();  
            }  
        }else{  
            event.preventDefault();      
        }  
    }  
</script>  
</body>
</html>

 wrap块为窗口可看到的部分，我们可以通过js获取窗口可视区的大小，并为其设置overflow: hidden属性，使得窗口不出现滚动条，只显示窗口大小的一页内容；

设置main定位为relative，通过改变main块的top属性实现不同页面的切换。

js代码的主要部分就是对滚动事件的函数绑定，大多数浏览器提供了 “mousewheel” 事件，Firefox 3.5+不支持，但支持相同作用的事件：”DOMMouseScroll”；

mousewheel事件“event.wheelDelta” 属性值：返回的如果是正值说明滚轮是向上滚动；

DOMMouseScroll事件“event.detail” 属性值：返回的如果是负值说明滚轮是向上滚动;每页高度为document.body.clientHeight+’px’;

参考：http://blog.csdn.net/rita_jing/article/details/78236768

posted @ 2018-02-28 23:28  vxee  阅读(947)  评论(0)  编辑  收藏  举报