javascript 模擬滾動 隱藏滾動條
阿新 • • 發佈：2018-05-05
top dev func chef for code pre one asc
想隱藏掉難看的滾動條，四處翻看博客,思路來源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 }
javascript 模擬滾動 隱藏滾動條