下面程式碼是用vue來寫的

1、HTML結構

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

2、CSS樣式

wrap塊為視窗可看到的部分，通過absolute等屬性設定佔滿視窗，併為其設定為：overflow:hidden屬性，使得視窗不出現滾動條，只顯示視窗大小的一頁內容。

設定main區域，定位為relative,通過改變main塊的 top 屬性實現不同頁面的切換，具體的css程式碼如下：

 1 <style lang="less" scoped>
 2
 
 #wrap{
 3     position: absolute;
 4     top: 0;
 5     bottom: 0;
 6     left: 0;
 7     right: 0;
 8     overflow:hidden;
 9     background:rgb(15, 221, 211);
10     #main{
11         width:100%;
12         position:relative;
13         .page{
14             width:100%;
15             margin:0;
16             font-size
 
: 20px;
17         }
18         #page1 {
19             background:rgb(195, 185, 240);
20         }
21         #page2 {
22             background: rgb(15, 221, 211);
23         }
24         #page3 {
25             background: rgb(236, 173, 217);
26         }
27         #page4 {
28             background: rgb(241, 161, 141);
29         }
30     }
31 }
32 
33 </style>

3、JavaScript程式碼邏輯（對滾動事件的函式繫結）

要考慮到滑鼠滾動事件的相容性：

（1）大多數瀏覽器提供了mousewheel事件

（2）Firefox 3.5+不支援，但支援相同作用的事件：DOMMouseScroll

（3）滾動屬性值的區別：

　　① mousewheel事件：event.wheelDelta返回的如果是正值說明滾輪是向上滾動
　　② DOMMouseScroll事件：event.detail返回的如果是負值說明滾輪是向上滾動

同時每頁高度為document.body.clientHeight+px，程式碼如下

 1 <script>
 2 export default {
 3     data() {
 4         return {
 5             now: 0,
 6             startTime: 0,
 7             endTime: 0,
 8             length: 0,
 9         }
10     },
11     mounted() {
12         this.length = document.body.clientHeight;
13         var pages = document.getElementsByClassName('page');
14         for(let i = 0; i<pages.length; i++) {
15             pages[i].style.height = this.length + 'px'
16         }
17         /* 區分瀏覽器
18             大多數瀏覽器提供了mousewheel事件，
19             Firefox 3.5+不支援，但支援相同作用的事件：DOMMouseScroll; 
20         */
21         if(navigator.userAgent.toLowerCase().indexOf('firefox') != -1) {
22             document.addEventListener('DOMMouseScroll', this.scrollFun);
23         }else if(document.addEventListener){
24             document.addEventListener('mousewheel', this.scrollFun, false)
25         }else if(document.attachEvent){ // IE
26             document.attachEvent("onmousewheel", this.scrollFun);
27         }else {
28             document.onmousewheel = this.scrollFun;
29         }
30     },
31     methods: {
32         scrollFun(e){
33             var main = document.getElementById('main');
34             this.startTime = new Date().getTime();
35             var event = e || window.event;
36             /*  mousewheel事件：event.wheelDelta 返回的如果時正值說明滾輪是向上滾動的；
37                 DOMMouseScroll事件：event.detail 返回的如果時負值說明滾輪是向上滾動，
38                 每頁高度為 document.body.clientHeight+px;
39             */
40             var dir = event.wheelDelta || -event.detail;
41             if(this.startTime - this.endTime > 200) {
42                 if(dir > 0 && this.now > -3 * this.length) {
43                     this.now -= this.length;
44                     main.style.top = this.now + 'px';
45                     this.endTime = new Date().getTime(); 
46                 }else if(dir < 0 && this.now < 0){
47                     this.now += this.length;
48                     main.style.top = this.now + 'px';
49                     this.endTime = new Date().getTime(); 
50                 }
51             }else {
52                 // event.preventDafault();
53             }
54         }
55     }
56 }
57 </script>

以上程式碼參考大神，並做了部分改動