基于iScroll实现内容滚动

最新推荐文章于 2023-04-15 18:00:25 发布

崔昕阳

最新推荐文章于 2023-04-15 18:00:25 发布

阅读量1.5k

点赞数

分类专栏： JQuery iScroll

本文链接：https://blog.csdn.net/Cuixinyang19_/article/details/79624502

版权

iScroll 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

JQuery

1 篇文章 0 订阅

订阅专栏

一、iScroll简介

iScroll 是一款针对web app使用的滚动控件，它可以模拟原生IOS应用里的滚动列表操作，还可以实现缩放、拉动刷新、精确捕捉元素、自定义滚动条等功能。这里博主使用的版本iScroll4.25，目前最新版本是iScroll5，大家可以去官网下载。
官网地址：http://iscrolljs.com/

二、iScroll使用方法

1.iScroll使用结构

最优化使用iScroll的结构一般如下所示：

HTML:
<div id="wrapper">
        <div id="scroller">
            <ul>
                <li></li>
                ...
            </ul>
            <ul>
                <li></li>
                ...
            </ul>
        </div>
    </div>

注：1、iScroll一定要与滚动内容外面的wrapper进行联系才会产生效果。
   2、只有wrapper里的第一个子元素才可以滚动。

2、实例化iScroll

iScroll必须在调用之前实例化，实例化代码如下（在head标签中添加如下代码）：

<script src="iscroll.js"></script>
    <script>
        var myscroll;//myscroll是全局变量，可以任意地方调用
        function loaded(){
            myscroll = new iScroll("wrapper");
            }
        window.addEventListener("DOMContentLoaded",loaded,false);
    </script>

三、滚动测试实例

HTML+CSS:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<script src="iscroll-4.2.5fix.js"></script><!--引入js包-->
<!--实例化iScroll-->
<script type="text/javascript">
    var myscroll;
    function loaded(){
    myscroll = new iScroll("wrapper");
    }
    window.addEventListener("DOMContentLoaded",loaded,false);
</script>
<!--CSS样式设置-->
#wrapper {
    position:absolute; z-index:1;
    top:45px; bottom:48px; left:0;
    width:100%;
    background:#aaa;
    overflow:auto;
}

#scroller {
    position:relative;
/*  -webkit-touch-callout:none;*/
    -webkit-tap-highlight-color:rgba(0,0,0,0);

    float:left;
    width:100%;
    padding:0;
}

#scroller ul {
    position:relative;
    list-style:none;
    padding:0;
    margin:0;
    width:100%;
    text-align:left;
}

#scroller li {
    padding:0 10px;
    height:40px;
    line-height:40px;
    border-bottom:1px solid #ccc;
    border-top:1px solid #fff;
    background-color:#fafafa;
    font-size:14px;
}

#scroller li > a {
    display:block;
}
</style>
<title>滚动测试</title>
</head>
<body>
<div id="wrapper">
    <div id="scroller">
        <ul id="thelist">
            <li>Pretty row 1</li>
            <li id="aaa">Pretty row 2</li>
            <li>Pretty row 3</li>
            <li>Pretty row 4</li>
            <li>Pretty row 5</li>
            <li>Pretty row 6</li>
            <li>Pretty row 7</li>
            <li>Pretty row 8</li>
            <li>Pretty row 9</li>
            <li>Pretty row 10</li>
            <li>Pretty row 11</li>
            <li>Pretty row 12</li>
            <li>Pretty row 13</li>
            <li>Pretty row 14</li>
            <li>Pretty row 15</li>
            <li>Pretty row 16</li>
            <li>Pretty row 17</li>
            <li>Pretty row 18</li>
        </ul>
    </div>
</div>
</body>
</html>

四、运行效果

博主刚开始学习，局部内容滚动这只是iScroll最基本的功能，接下来博主会尝试拉动刷新等功能。

崔昕阳

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
基于iScroll实现内容滚动

一、iScroll简介iScroll 是一款针对web app使用的滚动控件，它可以模拟原生IOS应用里的滚动列表操作，还可以实现缩放、拉动刷新、精确捕捉元素、自定义滚动条等功能。这里博主使用的版本iScroll4.25，目前最新版本是iScroll5，大家可以去官网下载。官网地址：http://iscrolljs.com/二、iScroll使用方法1.iScroll使用...
复制链接

扫一扫