javascript 模拟滚动 隐藏滚动条

Posted li-jun-wei

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了javascript 模拟滚动 隐藏滚动条相关的知识，希望对你有一定的参考价值。

想隐藏掉难看的滚动条，四处翻看博客,思路来源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  模拟滚动 隐藏滚动条的主要内容，如果未能解决你的问题，请参考以下文章
 

 javascript动画系列第五篇——模拟滚动条


 如何在phonegap中隐藏ios滚动条


 CSS如何隐藏滚动条？


 CSS怎么隐藏滚动条


 javascript中如可控制iframe的滚动条位置


 javascript中如可控制iframe的滚动条位置