全屏滚动的原理及实现

Posted 2020-11-09 舞纷菲

之前用fullpage插件做过全屏滚动的页面，今天用js自己实现了一下，还蛮简单的.

首先html结构为

 

[html] view plain copy

 

1. <div id="wrap">  
2.     <div id="main">  
3.         <div id="page1" class="page"></div>  
4.         <div id="page2" class="page"></div>  
5.         <div id="page3" class="page"></div>  
6.         <div id="page4" class="page"></div>  
7.     </div>      
8. </div>  

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

设置main定位为relative，通过改变main块的top属性实现不同页面的切换，具体的css代码如下：

 

[css] view plain copy

 

1. html,body{  
2. margin: 0;  
3. padding: 0;  
4. }  
5. #wrap{  
6.     width: 100%;  
7.     overflow: hidden;  
8.     background: #ccc;  
9. }  
10. #main{  
11.     width: 100%;  
12.     background: #ccc;  
13.     position: relative;  
14. }  
15. .page{  
16.     width:100%;  
17.     margin:0;  
18. }  
19. #page1{  
20.     background:#E4E6CE;  
21. }  
22. #page2{  
23.     background:#6CE26C;  
24. }  
25. #page3{  
26.     background:#BF4938;  
27. }  
28. #page4{  
29.     background:#2932E1;  
30. }  

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

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

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

具体代码如下：

 

[javascript] view plain copy

 

1. var pages = document.getElementsByClassName("page");  
2. var wrap = document.getElementById("wrap");  
3. var len = document.documentElement.clientHeight;  
4. var main = document.getElementById("main");  
5. wrap.style.height = len + "px";  
6. for(var i=0; i<pages.length; i++){  
7.     pages[i].style.height = len + "px";  
8. }  
9. if(navigator.userAgent.toLowerCase().indexOf("firefox") != -1){  
10.     document.addEventListener("DOMMouseScroll",scrollFun);  
11. }else if(document.addEventListener){  
12.     document.addEventListener("mousewheel",scrollFun,false);  
13. }else if(document.attachEvent){  
14.     document.attachEvent("onmousewheel",scrollFun);  
15. }else{  
16.     document.onmousewheel = scrollFun;  
17. }  
18. var startTime = 0;  
19. var endTime = 0;  
20. var now = 0;  
21. function scrollFun(e){  
22.     startTime = new Date().getTime();  
23.     var event = e || window.event;  
24.     var dir = event.detail || -event.wheelDelta;  
25.     if(startTime - endTime > 1000){  
26.         if(dir>0 && now > -3*len){  
27.             now -= len;   
28.             main.style.top = now +"px";  
29.             endTime = new Date().getTime();  
30.         }else if(dir<0 && now < 0){  
31.             now += len;  
32.             main.style.top = now +"px";  
33.             endTime = new Date().getTime();  
34.         }  
35.     }else{  
36.         event.preventDefault();      
37.     }  
38. }