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%}

 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

javascript 模拟滚动隐藏滚动条相关推荐

html滚动条隐藏后不能滚动,隐藏滚动条，但仍然可以滚动
更新: Firefox现在支持使用CSS隐藏滚动条,因此现在涵盖了所有主流浏览器(Chrome,Firefox,IE,Safari等). 只需将以下CSS应用于要从中删除滚动条的元素:.contain ...
h5滚动隐藏滚动条_vue.js-div怎么隐藏滚动条
这次给大家带来vue.js-div怎么隐藏滚动条,vue.js-div隐藏滚动条的注意事项有哪些,下面就是实战案例,一起来看一下. 组件被包在一个高度固定的pmounted () { var bop ...
h5滚动隐藏滚动条_这 10 个值得开启的隐藏功能，让你的 Chrome 释放更多潜力
上次分享了让 Chrome 浏览器用得更顺手的地址栏命令,跟大家整理和介绍了多个 Chrome 地址栏命令,利用好这些命令工具能够提升浏览器配置效率,让你的 Chrome 浏览器用得更顺手. 这次介绍 ...
CSS 元素超出部分滚动, 并隐藏滚动条
方法一, 利用 css 3 的新特性 -webkit-scrollbar, 但是这种方式不兼容火狐和 IE <!DOCTYPE html> <html> <head ...
【前端大概一分钟】css隐藏滚动条同时可以滚动
1. 通过 ::-webkit-scrollbar 伪元素 .inner-container::-webkit-scrollbar {display: none; } 复制代码简单粗暴,但是兼容性不 ...
html让下拉条消失,CSS 实现隐藏滚动条同时又可以滚动
移动端页面为了更接近原生的体验,是否可以隐藏滚动条,同时又保证页面可以滚动? 使用 overflow:hidden 隐藏滚动条,但存在的问题是:页面或元素失去了滚动的特性. 由于只需要兼容移动浏览器( ...
怎么隐藏滚动条又能滚动
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="U ...
C#中如何隐藏滚动条(ScrollBar)同时又具备自动滚动的功能
C#中如何隐藏滚动条(ScrollBar)同时又具备自动滚动的功能 (2011-01-30 13:38:28) 转载▼ 标签: it http://blog.sina.com.cn/s/blog_ ...
CSS隐藏滚动条并可以滚动内容
隐藏滚动条常用方法 .container::-webkit-scrollbar {display:none} 为了兼容其他的浏览器,可以用这样的方法: 在滚动区域外再套一层div,给这层div设置ov ...

javascript 模拟滚动隐藏滚动条

javascript 模拟滚动隐藏滚动条相关推荐

最新文章

热门文章

javascript 模拟滚动 隐藏滚动条

javascript 模拟滚动 隐藏滚动条相关推荐

最新文章

热门文章

javascript 模拟滚动隐藏滚动条

javascript 模拟滚动隐藏滚动条相关推荐