想隐藏掉难看的滚动条，四处翻看博客,思路来源https://www.cnblogs.com/chefweb/p/6473517.html，不知道有没有更好的思路，先凑合着用吧。
html
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title></title> 6 <link rel="stylesheet" href="css/index.css" /> 7 <script type="text/javascript" src="js/index.js"></script> 8 </head> 9 10 <body> 11 <div class="content"> 12 <ul> 13 <!--面1 --> 14 <li> 15 <div class="first"> 16 00000000 17 18 </div> 19 </li> 20 <!--面2 --> 21 <li> 22 <div class="second">1111111111111111111111</div> 23 </li> 24 <!--面3 --> 25 <li> 26 <div class="third">22222222222222222</div> 27 </li> 28 <!--面4 --> 29 <li> 30 <div class="fourth">333333333333333333333</div> 31 </li> 32 </ul> 33 </div> 34 </body> 35 </html>
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].offsetTop
24 }
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 }
原文地址：https://www.cnblogs.com/li-jun-wei/p/8994249.html
时间： 2024-10-10 15:08:54