iScroll

最新推荐文章于 2024-11-05 15:31:54 发布

小白小白从不日白

最新推荐文章于 2024-11-05 15:31:54 发布

阅读量3.1k

点赞数

分类专栏：前端开发中常用的一些小型框架及插件文章标签：前端 iScroll

本文链接：https://blog.csdn.net/weixin_43285360/article/details/121403033

版权

前端开发中常用的一些小型框架及插件专栏收录该内容

11 篇文章 5 订阅

订阅专栏

一、iScroll基本使用

1.1 什么是iScroll?

iScroll是一个高性能，资源占用少，无依赖，多平台的javascript滚动插件。
iScroll不仅仅是滚动。在你的项目中包含仅仅4kb大小的iScroll，能让你的项目便拥有滚动，缩放，平移，无限滚动，视差滚动，旋转功能

1.2 iScroll基本使用

按照iScroll的规定搭建HTML结构

引入iScroll

创建iScroll对象, 告诉它谁需要滚动

1.3 iScroll的版本

针对iScroll的优化。为了达到更高的性能，iScroll分为了多个版本。你可以选择最适合你的版本。
iscroll.js，这个版本是常规应用的脚本。它包含大多数常用的功能，有很高的性能和很小的体积。
iscroll-lite.js，精简版本。它不支持快速跳跃，滚动条，鼠标滚轮，快捷键绑定。但如果你所需要的是滚动(特别是在移动平台) iScroll 精简版是又小又快的解决方案。
iscroll-probe.js，探查当前滚动位置是一个要求很高的任务,这就是为什么我决定建立一个专门的版本。如果你需要知道滚动位置在任何给定的时间,这是iScroll给你的。（我正在做更多的测试,这可能最终在常规iscroll.js脚本，请留意）。
iscroll-zoom.js，在标准滚动功能上增加缩放功能。
iscroll-infinite.js，可以做无限缓存的滚动。处理很长的列表的元素为移动设备并非易事。 iScroll infinite版本使用缓存机制,允许你滚动一个潜在的无限数量的元素。

1.4 示例

        *{
            margin: 0;
            padding: 0;
            touch-action: none;
        }
        div{
            width: 100%;
            height: 300px;
            border: 1px solid #000;
            box-sizing: border-box;
            overflow: hidden;
        }
        dl>dt{
            line-height: 30px;
            text-align: center;
            border-bottom: 1px solid #000;
        }

<script src="js/iscroll.js"></script>

<div class="box">
    <dl>
        <dt>我是标题1</dt>
        <dt>我是标题2</dt>
        <dt>我是标题3</dt>
        <dt>我是标题4</dt>
        <dt>我是标题5</dt>
        <dt>我是标题6</dt>
        <dt>我是标题7</dt>
        <dt>我是标题8</dt>
        <dt>我是标题9</dt>
        <dt>我是标题10</dt>
        <dt>我是标题11</dt>
        <dt>我是标题12</dt>
        <dt>我是标题13</dt>
        <dt>我是标题14</dt>
        <dt>我是标题15</dt>
        <dt>我是标题16</dt>
        <dt>我是标题17</dt>
        <dt>我是标题18</dt>
        <dt>我是标题19</dt>
        <dt>我是标题20</dt>
        <dt>我是标题21</dt>
        <dt>我是标题22</dt>
        <dt>我是标题23</dt>
        <dt>我是标题24</dt>
        <dt>我是标题25</dt>
        <dt>我是标题26</dt>
        <dt>我是标题27</dt>
        <dt>我是标题28</dt>
        <dt>我是标题29</dt>
        <dt>我是标题30</dt>
    </dl>
</div>

let myScroll = new IScroll('.box');

使用iScroll的步骤：

导入iScroll
搭建一个三层结构
创建一个iScroll对象并告诉哪一个元素里面的内容需要滚动即可

二、iScroll高级应用

在iScroll初始化阶段可以通过构造函数的第二个参数配置它

var myScroll = new IScroll('#wrapper', {
    mouseWheel: true,
    scrollbars: true
});

2.1 示例1

        *{
            margin: 0;
            padding: 0;
            touch-action: none;
        }
        div{
            width: 50%;
            height: 300px;
            border: 1px solid #000;
            box-sizing: border-box;
            overflow: hidden;
            position: relative;
        }
        dl>dt{
            line-height: 30px;
            text-align: center;
            border-bottom: 1px solid #000;
        }
        /* 自定义滚动条样式第二步 */
        .iScrollVerticalScrollbar{
            width: 30px;
            height: 100%;
            background: deepskyblue;
            position: absolute;
            top: 0;
            right: 0;
            z-index: 999;
        }
        .iScrollIndicator{
            width: 100%;
            background: pink;
        }

<script src="js/iscroll.js"></script>

<div class="box">
    <dl>
        <dt>我是标题1</dt>
        <dt>我是标题2</dt>
        <dt>我是标题3</dt>
        <dt>我是标题4</dt>
        <dt>我是标题5</dt>
        <dt>我是标题6</dt>
        <dt>我是标题7</dt>
        <dt>我是标题8</dt>
        <dt>我是标题9</dt>
        <dt>我是标题10</dt>
        <dt>我是标题11</dt>
        <dt>我是标题12</dt>
        <dt>我是标题13</dt>
        <dt>我是标题14</dt>
        <dt>我是标题15</dt>
        <dt>我是标题16</dt>
        <dt>我是标题17</dt>
        <dt>我是标题18</dt>
        <dt>我是标题19</dt>
        <dt>我是标题20</dt>
        <dt>我是标题21</dt>
        <dt>我是标题22</dt>
        <dt>我是标题23</dt>
        <dt>我是标题24</dt>
        <dt>我是标题25</dt>
        <dt>我是标题26</dt>
        <dt>我是标题27</dt>
        <dt>我是标题28</dt>
        <dt>我是标题29</dt>
        <dt>我是标题30</dt>
    </dl>
</div>

    let myScroll = new IScroll('.box', {
        mouseWheel: true, // 是否支持鼠标滚轮滚动
        // scrollbars: true, // 是否显示滚动条
        scrollbars: 'custom' // 设置自定义滚动条样式第一步
    });

    // myScroll.on("beforeScrollStart", function () {
    //     console.log("滚动之前");
    // });

    // myScroll.on("scrollStart", function () {
    //     console.log("开始滚动");
    // });
    
    // myScroll.on("scroll", function () {
    //     console.log("正在滚动");
    // });
    
    // myScroll.on("scrollEnd", function () {
    //     console.log("滚动结束");
    // });

更多请参考： iScroll 5 介绍 · iScroll 5 API 中文版

2.2 示例2--电商侧边栏

        *{
            margin: 0;
            padding: 0;
            touch-action: none;
        }
        html,body{
            width: 100%;
            height: 100%;
        }
        .box{
            width: 85px;
            height: 100%;
            border: 1px solid #000;
        }
        .box>ul{
            list-style: none;
            width: 100%;
            position: relative;
        }
        .box>ul>li{
            width: 100%;
            height: 40px;
            line-height: 40px;
            text-align: center;
            border-bottom: 1px solid #666;
        }
        .box>ul>li:last-child{
            border-bottom: none;
        }

<script src="js/iscroll.js"></script>

<div class="box">
    <ul>
        <li>热门推荐</li>
        <li>指趣学院</li>
        <li>手机数码</li>
        <li>家用电脑</li>
        <li>电脑办公</li>
        <li>计生情趣</li>
        <li>美妆护肤</li>
        <li>个护清洁</li>
        <li>汽车用品</li>
        <li>京东超市</li>
        <li>男装</li>
        <li>男鞋</li>
        <li>女装</li>
        <li>女鞋</li>
        <li>母婴童装</li>
        <li>图书音像</li>
        <li>运动户外</li>
        <li>内衣配饰</li>
        <li>食品生鲜</li>
        <li>酒水饮料</li>
        <li>家具家装</li>
        <li>箱包手袋</li>
        <li>钟表珠宝</li>
        <li>玩具乐器</li>
        <li>医疗保健</li>
        <li>宠物生活</li>
        <li>礼品鲜花</li>
        <li>生活旅行</li>
        <li>奢侈品</li>
        <li>艺术邮币</li>
        <li>二手商品</li>
    </ul>
</div>