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，自己写一个简单的滚动条