移动端的区域滚动——iScroll

最新推荐文章于 2024-07-24 11:59:51 发布

空白

最新推荐文章于 2024-07-24 11:59:51 发布

阅读量446

点赞数

分类专栏： CSS 学习文章标签：移动开发

本文链接：https://blog.csdn.net/qq_38496329/article/details/107811483

版权

学习同时被 2 个专栏收录

105 篇文章 2 订阅

订阅专栏

CSS

6 篇文章 0 订阅

订阅专栏

iScroll

简介

iScroll是一个高性能，资源占用少，无依赖，多平台的javascript滚动插件。

它可以在桌面，移动设备和智能电视平台上工作。它一直在大力优化性能和文件大小以便在新旧设备上提供最顺畅的体验。

iScroll不仅仅是滚动。它可以处理任何需要与用户进行移动交互的元素。在你的项目中包含仅仅4kb大小的iScroll，你的项目便拥有了滚动，缩放，平移，无限滚动，视差滚动，旋转功能。给它一个扫帚它甚至能帮你打扫办公室。

即使平台本身提供的滚动已经很不错，iScroll可以在此基础上提供更多不可思议的功能。具体来说：

细粒度控制滚动位置，甚至在滚动过程中。你总是可以获取和设置滚动器的x，y坐标。
动画可以使用用户自定义的擦出功能（反弹’bounce’，弹性’elastic’，回退’back’，…）。
你可以很容易的挂靠大量的自定义事件（onBeforeScrollStart, *
开箱即用的多平台支持。从很老的安卓设备到最新的iPhone，从Chrome浏览器到IE浏览器。

下载

iScroll

使用

因为只是简单的引用，在此直接上案例d

页面：

<body>
    <div class="layout">
        <div class="left">
            <ul>
                <li>111</li>
                <li>111</li>
                <li>111</li>
                <li>111</li>
                <li>111</li>
                <li>111</li>
                <li>111</li>
                <li>111</li>
                <li>111</li>
                <li>111</li>
                <li>111</li>
                <li>111</li>
                <li>111</li>
                <li>111</li>
                <li>111</li>
                <li>111</li>
                <li>111</li>
                <li>111</li>
                <li>111</li>
            </ul>
        </div>
        <div class="right">
            <ul>
                <li>222</li>
                <li>222</li>
                <li>222</li>
                <li>222</li>
                <li>222</li>
                <li>222</li>
                <li>222</li>
                <li>222</li>
                <li>222</li>
                <li>222</li>
                <li>222</li>
                <li>222</li>
                <li>222</li>
                <li>222</li>
                <li>222</li>
                <li>222</li>
            </ul>
        </div>
    </div>
    <script src="js/iscroll.js"></script>
</body>

CSS：

    * {
        margin: 0;
        padding: 0;
    }

    ul,
    ol {
        list-style: none;
    }


    html,
    body {
        height: 100%;
    }

    .layout {
        width: 100%;
        height: 100%;
    }

    .layout .left {
        width: 90px;
        height: 100%;
        float: left;
        overflow: hidden;
    }

    .layout .left ul {
        width: 90px;
    }

    .layout .left ul li {
        width: 90px;
        height: 50px;
        line-height: 50px;
        background: #f3f4f5;
        text-align: center;
        font-size: 12px;
        border-bottom: 1px solid #ccc;
        border-right: 1px solid #ccc;
    }

    .layout .right {
        overflow: hidden;
        height: 100%;
    }

    .layout .right ul {
        width: 100%;
    }

    .layout .right ul li {
        height: 60px;
        line-height: 60px;
        background: #f5a4f5;
        text-align: center;
        font-size: 12px;
        border-bottom: 1px solid #333;
    }

js：

        window.onload = function () {
            new IScroll(document.querySelector('.left'), {
                scrollX: false,
                scrollY: true
            })
            new IScroll(document.querySelector('.right'), {
                scrollX: false,
                scrollY: true
            })
        }

空白

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
移动端的区域滚动——iScroll

iScroll简介iScroll是一个高性能，资源占用少，无依赖，多平台的javascript滚动插件。它可以在桌面，移动设备和智能电视平台上工作。它一直在大力优化性能和文件大小以便在新旧设备上提供最顺畅的体验。iScroll不仅仅是滚动。它可以处理任何需要与用户进行移动交互的元素。在你的项目中包含仅仅4kb大小的iScroll，你的项目便拥有了滚动，缩放，平移，无限滚动，视差滚动，旋转功能。给它一个扫帚它甚至能帮你打扫办公室。即使平台本身提供的滚动已经很不错，iScroll可以在此基础上提供更
复制链接

扫一扫