全屏滚动的原理及实现

之前用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. }

原文地址：https://www.cnblogs.com/mm2015/p/9095212.html