javascript 類比滾動隱藏捲軸

最後更新：2018-05-05 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：math cond height width nload web char mys ott

想隱藏掉難看的捲軸，四處翻看部落格,思路來源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                         0000000017                         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].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 }

javascript 類比滾動隱藏捲軸

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More