【实例】原生 js 实现全屏滚动效果

其他，插件：http://www.dowebok.com/77.html

原理： 1. 计算当前浏览器屏幕高度，每次翻页显示的内容高度即为屏幕高度

2. 对鼠标滚轮事件进行监听，注意滚轮事件的浏览器兼容问题。

废话不多说，直接上代码

html代码：

 1     <span style="font-size:18px;"><span style="font-size:14px;"><div id="wrap">  
 2         <div id="main" style="top: 0;">  
 3             <div class="content num1">  
 4                 <img src="https://www.bing.com/az/hprichbg/rb/SingingRingingTree_ZH-CN12497946624_1920x1080.jpg" width="100%" height="100%">  
 5             </div>  
 6             <div class="content num2">  
 7                 <img src="https://www.bing.com/az/hprichbg/rb/ShenandoahNP_ZH-CN9981989975_1920x1080.jpg" width="100%" height="100%">  
 8             </div>  
 9             <div class="content num3">  
10                 <img src="https://www.bing.com/az/hprichbg/rb/GareSaintLazare_ZH-CN6611772290_1920x1080.jpg" width="100%" height="100%">  
11             </div>  
12             <div class="content num4">  
13                 <img src="https://www.bing.com/az/hprichbg/rb/FriendshipSquare_ZH-CN8820626148_1920x1080.jpg" width="100%" height="100%">  
14             </div>  
15         </div>  
16     </div></span></span>

css代码：

1     <span style="font-size:14px;">#wrap{overflow: hidden;width: 100%;}  
2     #main{top: 0;position: relative;}  
3     .content{width: 100%;margin: 0;height: 100%;}  
4     .num1{background: #e8e8e8;}  
5     .num2{background: pink;}  
6     .num3{background: yellow;}  
7     .num4{background: orange;}</span>

js代码：

 1     <span style="font-size:14px;"><script type="text/javascript">  
 2         var wrap = document.getElementById("wrap");  
 3           
 4         var divHeight = window.innerHeight;  
 5           
 6         wrap.style.height = divHeight + "px";  
 7       
 8         var content = $(".content");//懒得写获取类的原生js代码了，直接用了jquery，=。=  
 9       
10         content.height(divHeight);  
11       
12         var startTime = 0, //开始翻屏时间  
13             endTime = 0,  
14             now = 0;     
15       
16         if ((navigator.userAgent.toLowerCase().indexOf("firefox")!=-1)){  
17             //for firefox;  
18             document.addEventListener("DOMMouseScroll",scrollFun,false);  
19           
20         }  
21         else if (document.addEventListener) {  
22           
23             document.addEventListener("mousewheel",scrollFun,false);  
24           
25         }  
26         else if (document.attachEvent) {  
27           
28             document.attachEvent("onmousewheel",scrollFun);  
29           
30         }  
31         else{  
32           
33             document.onmousewheel = scrollFun;  
34           
35         }  
36       
37         //滚动事件处理函数  
38         function scrollFun(event){  
39       
40                 startTime = new Date().getTime();  
41       
42                 var delta = event.detail || (-event.wheelDelta);  
43       
44                 if ((endTime - startTime) < -1000) {  
45                     //1秒内执行一次翻页  
46       
47                     if (delta > 0 && parseInt(main.style.top) > -divHeight * ( content.length - 1)) { //向下翻页  
48       
49                         now += divHeight ;  
50       
51                         turnPage(now);  
52       
53                     }   
54       
55                     if (delta < 0 && parseInt(main.style.top) < 0) { //向上翻页  
56       
57                         now -= divHeight ;  
58       
59                         turnPage(now);  
60       
61                     }  
62       
63                     endTime = new Date().getTime();  
64       
65                 }  
66                 else{  
67       
68                     event.preventDefault();  
69       
70                 }  
71                   
72         }  
73       
74         //翻页函数  
75         function turnPage(now){  
76               
77             $("#main").animate({top:(-now+'px')},1000);  
78       
79             //懒得写动画代码了，直接用了jquery</span><span style="font-size:14px;">，=。=  
80         }  
81     </script></span>