想隐藏掉难看的滚动条，四处翻看博客,思路来源https://www.cnblogs.com/chefweb/p/6473517.html，不知道有没有更好的思路，先凑合着用吧。

html

1  2  3      4         
      5          6         
      7          8      9 10     11         
     
      12             
      
       13                 
       14                 
       
15                     
        
         16                         0000000017                         18                     
        
19                 
20                 
       21                 
       
22                     
        
         1111111111111111111111
        
23                 
24                 
       25                 
       
26                     
        
         22222222222222222
        
27                 
28                 
       29                 
       
30                     
        
         333333333333333333333
        
31                 
32             
      
33         
     
34     35 

 

 

css

* {
       margin: 0;    padding: 0;}ul li {
       list-style-type: none;}.content {
       overflow: hidden;}.content ul li>div{
   box-sizing: border-box;border: 1px solid #AB86C0;height:100%;width:100%}

js

1 window.onload = function() { 2     var bodyHeight = window.innerHeight; 3     var bodyWidth = window.innerWidth; 4     var ulLis = document.querySelectorAll(".content ul li"); 5     var divContent = document.querySelector(".content"); 6     divContent.style.height = bodyHeight + "px"; 7     divContent.style.width = bodyWidth + "px"; 8     for(var i = 0; i < ulLis.length; i++) { 9         ulLis[i].style.height = bodyHeight + "px";10         ulLis[i].style.width = bodyWidth + "px";11     }12     window.onresize = function() {13         var bodyHeight = window.innerHeight;14         var bodyWidth = window.innerWidth;15         var ulLis = document.querySelectorAll(".content ul li");16         var divContent = document.querySelector(".content");17         divContent.style.height = bodyHeight + "px";18         divContent.style.width = bodyWidth + "px";19         for(var i = 0; i < ulLis.length; i++) {20             ulLis[i].style.height = bodyHeight + "px";21             ulLis[i].style.width = bodyWidth + "px";22         }23         divContent.scrollTop = ulLis[0].offsetTop24     }25     26     document.body.addEventListener("DOMMouseScroll", function(event) {27         if(event.detail) {28             event.detail < 0 && mouseToTop();29             event.detail > 0 && mouseToBottom();30         }31     });32     window.onmousewheel = function(event) {33         var e = event || window.event;34         if(e.wheelDelta) {35             e.wheelDelta > 0 && mouseToTop();36             e.wheelDelta < 0 && mouseToBottom();37         }38 39     }40 41     function mouseToBottom() {42         for(let i = 0; i < ulLis.length; i++) {43             if(divContent.scrollTop == ulLis[i].offsetTop) {44                 (i > ulLis.length - 2) || setTimeout(function() {45                     myScroll(i + 1, "下");46                 }, 10);47             }48 49         }50     }51 52     function mouseToTop(m) {53         for(let i = 0; i < ulLis.length; i++) {54             if(divContent.scrollTop == ulLis[i].offsetTop) {55                 (i == 0) || (i == ulLis.length) || setTimeout(function() {56                     myScroll(i - 1, "上");57                 }, 10);58             }59         }60     }61 62     function myScroll(m, a) {63         var v = 0;64         var time = setInterval(function() {65             if(a == "下" ? (divContent.scrollTop < ulLis[m].offsetTop) : (divContent.scrollTop > ulLis[m].offsetTop)) {66                 v = Math.abs(Math.ceil(Math.abs((ulLis[m].offsetTop - divContent.scrollTop)) / 15));67                 a == "下" ? (divContent.scrollTop = divContent.scrollTop + v) : (divContent.scrollTop = divContent.scrollTop - v);68             } else {69                 divContent.scrollTop = ulLis[m].offsetTop;70                 clearInterval(time);71             }72         }, 1);73     }74 }