基于iScroll实现内容滚动

时间: 2018-03-21阅读: 1742标签: 滚动

一、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>


来源:http://blog.csdn.net/cuixinyang19_/article/details/79624502

站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: http://www.fly63.com/article/detial/532

DOM盒模型和位置 client offset scroll 和滚动的关系

在dom里面有几个描述盒子位置信息的值,pading border margin,width height,client;盒模型生产环境一般使用 box-sizing: border-box,效果:width == content.width + pading + border

完美解决H5滚动滑动穿透方案:不使用系统滚动

网上有很多黑科技解决这个问题,都不是从根本去解决,例如通过js控制弹出时html加上position:fixed; 弹窗关闭后再去掉该样式,总觉得不太对,像是打补丁。

JS 判断元素是否可以滚动

今天在解决 ios 移动端滚动穿透的问题时遇到一个问题,就是判断元素能否滚动,把这个过程记录下来。以下以纵向滚动为例,横向滚动同理。scrollHeight 是一个元素内容高度的度量,包括由于溢出导致的视图中不可见的内容

三种方式实现平滑滚动页面到顶部的功能

最近开发公司的公众号H5,做了一个点击icon滚动到顶部的功能。实现功能比较简单,直接调用window.scrollTo(0, 0),一行代码完成。但是作为一个攻城狮,怎么可能对自己要求这么低,所以我给自己加了个需求

无间歇文字滚动_ 原生js实现新闻无间歇性上下滚动

这篇文章主要介绍使用js实现文字无间歇性上下滚动,一些网站的公告,新闻列表使用的比较多,感兴趣的小伙伴们可以参考一下

解决多个window.onscroll覆盖的问题

默认一个页面只能同时存在一个window.onscroll函数。有的时候我们会引入工具的js框架,在框架中使用onscroll统一监听每个页面,但是在某个页面,我们可能还要使用onscroll来监控滚动条,完成具体某个业务逻辑,这是该怎么做呢?

解析移动端滚动穿透

滚动穿透在移动端开发中是一个很常见的问题,产生诡异的交互行为,影响用户体验,同时也让我们的产品看起来不那么“专业”。虽然不少产品选择容忍了这样的行为,但是作为追求极致的工程师,应该去了解为什么会产生以及如何去解决

原生js实现新闻无间歇性上下滚动【无间歇文字滚动】

这篇文章主要介绍使用js实现文字无间歇性上下滚动,一些网站的公告,新闻列表使用的比较多,感兴趣的小伙伴们可以参考一下 ,代码实现如下。

JS原生实现连续滚动文字

最近在工作中遇到,文字在大屏中,出现底部有留白导致不连续的现象,很奇怪,故写这篇文章细究其原因;offsetTop 小于等于 scrollTop时 scrollTop至为0,此次滚动条回到初始位置

scrollBehavior 切换到新路由时,页面要滚动到顶部或保持原先的滚动位置

当创建一个 Router 实例,可以提供一个 scrollBehavior 方法:scrollBehavior 方法接收 to 和 from 路由对象。第三个参数 savedPosition 当且仅当 popstate 导航 (通过浏览器的 前进/后退 按钮触发) 时才可用。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!