js移動端滾動條插件iScroll.js的簡單使用

本文轉載自查看原文 2019-02-18 22:47 582 JS插件(借鑒&整理)

1.下載iScroll.js, 導包

2 html代碼

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0">
 6     <title>京東移動站-分類</title>
 7 </head>
 8 <body>
 9         <div class="jd_cateLeft">
10             <ul>
11                 <li class=""><a href="javascript:;">熱門推薦</a></li>
12                 <li class="now"><a href="javascript:;">潮流女裝</a></li>
13                 <li class=""><a href="javascript:;">品牌男裝</a></li>
14                 <li class=""><a href="javascript:;">內衣配飾</a></li>
15                 <li class=""><a href="javascript:;">家用電器</a></li>
16                 <li class=""><a href="javascript:;">電腦辦公</a></li>
17                 <li class=""><a href="javascript:;">手機數碼</a></li>
18                 <li class=""><a href="javascript:;">母嬰頻道</a></li>
19                 <li class=""><a href="javascript:;">圖書</a></li>
20                 <li class=""><a href="javascript:;">家居家紡</a></li>
21                 <li class=""><a href="javascript:;">居家生活</a></li>
22                 <li class=""><a href="javascript:;">家具建材</a></li>
23                 <li class=""><a href="javascript:;">熱門推薦</a></li>
24                 <li class=""><a href="javascript:;">潮流女裝</a></li>
25                 <li class=""><a href="javascript:;">品牌男裝</a></li>
26                 <li class=""><a href="javascript:;">內衣配飾</a></li>
27                 <li class=""><a href="javascript:;">家用電器</a></li>
28                 <li class=""><a href="javascript:;">電腦辦公</a></li>
29                 <li class=""><a href="javascript:;">手機數碼</a></li>
30                 <li class=""><a href="javascript:;">母嬰頻道</a></li>
31                 <li class=""><a href="javascript:;">圖書</a></li>
32                 <li class=""><a href="javascript:;">家居家紡</a></li>
33                 <li class=""><a href="javascript:;">居家生活</a></li>
34                 <li class=""><a href="javascript:;">家具建材</a></li>
35             </ul>
36         </div>
37 </body>
38 </html>

View Code

3 css代碼

 1 *,
 2 *::before,
 3 *::after{
 4     /*所有的標簽，和偽元素都選中*/
 5     margin: 0;
 6     padding: 0;
 7     /*移動端常用布局是非固定像素*/
 8     box-sizing: border-box;
 9     -webkit-box-sizing: border-box;
10     /*點擊高亮效果的清除*/
11     tap-highlight-color: transparent;
12     -webkit-tap-highlight-color: transparent;
13 }
14 html,body{
15     height: 100%;
16 }
17 a{
18     text-decoration: none;
19     color: #333;
20 }
21 ul,ol{
22     list-style: none;
23 }
24 .jd_cateLeft{
25     width: 90px;
26     height: 100%;
27     float: left;
28     /*防止ul撐開,出現滾動條*/
29     overflow: hidden;
30 }
31 .jd_cateLeft li{
32     width: 90px;
33     height: 50px;
34     border-bottom: 1px solid #ccc;
35     border-right: 1px solid #ccc;
36     text-align: center;
37     line-height: 50px;
38     font-size: 12px;
39 }
40 .jd_cateLeft a{
41     width: 100%;
42     display: block;
43 }

View Code

4.js代碼

 1 <script>
 2 //綁定滑動事件,並阻止元素發生默認的行為
 3 window.onload = function () {
 4     document.querySelector('.jd_cateLeft').addEventListener('touchmove',function(e){ 
 5     e.preventDefault();
 6 });
 7     /*區域滾動效果*/
 8     /*條件：一個容器裝着一個容器html結構*/
 9     /*找到大容器*/
10     /*子容器大於父容器*/
11     // 子容器在區域滾動的容器做來回的運動
12     // true可滑動 false 不能滑動
13     new IScroll(document.querySelector('.jd_cateLeft'),{
14         scrollX:false,
15         scrollY:true
16     });
17 }
18 </script>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 jquery——移動端滾動條插件iScroll.js iScroll.js插件使用方法滾動條插件---jquery.nicescroll.js 簡單使用 iscroll.js的簡單使用方法（總結） iScroll.js的用法 iscroll.js文檔 js 層隨着滾動條上下移動 iScroll.js和Swiper.js聯合使用時的插件沖突(滑動沖突) iscroll.js 用法介紹使用 js，自己寫一個簡單的滾動條