因为最近的项目所有页面老板想做成苹果原生那种上下拉动有回弹效果的体验，浏览器自带是没有这种功能的，自己写的话兼容性可能会出大问题，要适配安卓的各种机型实在是难，所以我还是选择去使用移动端相对比较稳定的iscroll.js这个插件来实现。。

刚开始使用的是iscroll4的版本，确实坑很多，但又没办法，只要一点一点来填。后来项目快做完了，问题也解决的差不多了，听到群里面有人开始在使用iscorll5的版本，性能还不错，就是兼容性不强，低版本的安卓机可能体验很不流畅，于是自己开始琢磨，就有了这篇文章。

以下是我在项目中的使用心得

iscoll4-------------------
 更新了一下iscroll4的demo---------------------------------------------2016.11.14
<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title></title>

		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">

		<link rel="stylesheet" type="text/css" href="reset.css"/>

		<style>

			#wrapper{

			    width:100%;

			    height:100%;

			    position:absolute;

			    z-index:1;

			}

			li{

				width: 100%;

				height: 100px;

				background: red;

				margin-bottom: 10px;

			}

		</style>

	</head>

	<body>

		<div id = "wrapper">

		    <ul>

		    	<li></li>

		    	<li></li>

		    	<li></li>

		    	<li></li>

		    	<li></li>

		    	<li></li>

		    </ul>

		</div>

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

		<script type="text/javascript">

			var myScroll=new iScroll("wrapper",{

			    hScrollbar:false,

			    vScrollbar:false,

			    onScrollMove: function () {

			         if((this.y < this.maxScrollY) && (this.pointY < 1)){

			          this.scrollTo(0, this.maxScrollY, 400);

			          return;

			         } else if (this.y > 0 && (this.pointY > window.innerHeight - 1)) {

			          this.scrollTo(0, 0, 400);

			          return;

			         }

			    }

			});

			function Refresh() {

			    setTimeout(function () {

			        myScroll.refresh();

			    }, 1000);

			}

		</script>

	</body>

</html>

其中的iscroll4.js和reset.css文件大家可以从网上下载，这个demo是可以跑起来的。　　

 
需要使用这个文件配合使用 
把需要滚动的区域放置ul中
<div id = "wrapper">
    <ul>
    
    </ul>
</div>
css的样式重点在于
#wrapper{
    width:100%;
    height:100%;
    position:absolute;
    z-index:1;
}
 
引入下面的js
var myScroll=new iScroll("wrapper",{
    hScrollbar:false, 
    vScrollbar:false,
    onScrollMove: function () {
         if((this.y < this.maxScrollY) && (this.pointY < 1)){
          this.scrollTo(0, this.maxScrollY, 400);
          return;
         } else if (this.y > 0 && (this.pointY > window.innerHeight - 1)) {
          this.scrollTo(0, 0, 400);
          return;
         }
    }
});
 
function Refresh() {
    setTimeout(function () {
        myScroll.refresh();
    }, 1000);
}
iscroll有个问题就是：它会与swiper的轮播图冲突，只要轮播图滑动就会直接跳链接，解决的方案就是给swiper里面配置一个阻止touchmove冒泡事件的属性        touchMoveStopPropagation : false, 这样就能解决问题。
 
下面介绍iscroll5demo------------------------iscroll5的js大家可以去网上下载
<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">

        <link rel="stylesheet" type="text/css" href="../reset.css"/>

        <!-- Link Swiper's CSS -->

        <link rel="stylesheet" href="../swiper.css">

        <style>

        *{

            margin: 0;

            padding: 0;

        }

        body{

            background: blue;

        }

            header{

                /*position: fixed;

                top: 0;*/

                background: red;

                width: 100%;

                height: 40px;

                line-height: 40px;

                text-align: center;

                z-index: 99;

            }

            #wrap{

                /*margin-top:40px;*/

                overflow: hidden;

            }

            section{

                background: green;

                height: 300px;

                margin-bottom: 1px;

                color: white;

            }

            /*#wrapper{

                position: absolute;

                height: 100%;

                width: 100%;

                z-index: 1;

            }*/

            html,body{

                height: 100%;

                overflow: hidden;

            }

            .box{

                display:box;

                display: -webkit-box;

                display: flex;

                display:-webkit-flex;

                overflow: hidden;

                flex-direction: column;

                width: 100%;

                height:100%;

                -webkit-box-orient: vertical;

            }

            #wrapper{

                overflow: hidden;

                -webkit-box-flex: 1;

                -webkit-flex: 1;

                flex: 1; 

            }

    .swiper-container {

        width: 100%;

        height: 200px;

    }

    .swiper-slide {

        text-align: center;

        font-size: 18px;

        background: #fff;

        display: -webkit-box;

        display: -ms-flexbox;

        display: -webkit-flex;

        display: flex;

        -webkit-box-pack: center;

        -ms-flex-pack: center;

        -webkit-justify-content: center;

        justify-content: center;

        -webkit-box-align: center;

        -ms-flex-align: center;

        -webkit-align-items: center;

        align-items: center;

    }

    .swiper-slide a{

        width: 100%;

        height: 100%;

    }

        </style>

    </head>

    <body>

        <div class="box">

            <header>导航栏</header>

            <div id="wrapper">

                <div id="wrap">

                    <!-- Swiper -->

                    <div class="swiper-container">

                        <div class="swiper-wrapper">

                            <div class="swiper-slide"><a href="../../3d热气球.html">Slide 1</a></div>

                            <div class="swiper-slide"><a href="../../3d热气球.html">Slide 2</a></div>

                            <div class="swiper-slide"><a href="../../3d热气球.html">Slide 3</a></div>

                            <div class="swiper-slide"><a href="../../3d热气球.html">Slide 4</a></div>

                        </div>

                        <div class="swiper-pagination"></div>

                    </div>

                    <section>1</section>

                    <section>2</section>

                    <section>3</section>

                    <section>4</section>

                    <section>5</section>

                </div>

            </div>

        </div>

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

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

        <script type="text/javascript" src="iscroll.js" ></script>

        <script>

        var swiper = new Swiper('.swiper-container', {

            pagination: '.swiper-pagination',

            paginationClickable: true

        });

        var myscroll;

        function loaded(){

            setTimeout(function(){

                myscroll=new IScroll("#wrapper");

            },100 );

        }

        window.addEventListener("load",loaded,false);

        $("#wrapper").one("touchstart",function(){

            myscroll.refresh();

        });

        </script>

    </body>

</html>

index.html

 
 
这是一个测试DOME,iscroll5使用结构和上述一样，而且不会和swiper冲突，可以采用flexbox来布局，但在一些低端机上面会出现上下滑很卡顿的情况，目前不清楚是因为布局的原因还是iscroll5的原因，有待进一步测试。
 
----------------------------------------------------------------------------------------------------------------2016.9.12
 
1.页面在移动端滚动条移动变得非常卡，最后加上了document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);滚动条变得很流畅  还可以加上css样式 给scroll元素增加css样式：-webkit-transform:translate3d(0,0,0);.
2.关于页面在不刷新的情况下如果添加了新的模块或者高度发生了变化会导致无法下拉的情况，使用iscroll5可以解决这个问题，就是在你触发了变化的事件之后，加上myscroll.refresh(); 去调用它自带的刷新方法。                                                                                                                   
                                                                                                                                                    ------------------------2016.10.8

浅谈一下关于iscroll的使用心得的更多相关文章

  1. 朱晔的互联网架构实践心得S2E6:浅谈高并发架构设计的16招

    朱晔的互联网架构实践心得S2E6:浅谈高并发架构设计的16招 概览 标题中的高并发架构设计是指设计一套比较合适的架构来应对请求.并发量很大的系统,使系统的稳定性.响应时间符合预期并且能在极端的情况下自 ...

  2. 浅谈程序员创业（要有一个自己的网站，最好的方式还是自己定位一个产品，用心把这个产品做好。或者满足不同需求的用户，要有特色）good

    浅谈程序员创业 ——作者:邓学彬.Jiesoft 1.什么是创业? 关于“创业”二字有必要重新学习一下,找了两个相对权威定义: 创业就是创业者对自己拥有的资源或通过努力能够拥有的资源进行优化整合,从而 ...

  3. 浅谈Windows API编程

    WinSDK是编程中的传统难点,个人写的WinAPI程序也不少了,其实之所以难就难在每个调用的API都包含着Windows这个操作系统的潜规则或者是windows内部的运行机制…… WinSDK是编程 ...

  4. 浅谈-对modbus的理解

    浅谈-对modbus的理解 一.简介 Modbus由MODICON公司于1979年开发,是一种工业现场总线协议标准.1996年施耐德公司推出基于以太网TCP/IP的Modbus协议:ModbusTCP ...

  5. 【转载】MIMO技术杂谈（一）：鱼与熊掌能否兼得？--浅谈分集与复用的权衡

    原文链接(向作者致敬):http://www.txrjy.com/thread-667901-1-1.html   无线通信世界在过去的几十年中的发展简直是爆发式的,MIMO(多发多收)技术的出现更是 ...

  6. 多测师浅谈 学员实现价值就是我们的幸福_高级讲师肖sir

    学员实现价值就是我们的幸福 作为一名资深的IT高级讲师,在传统的行业IT薪资基本都是过万,作为一名IT培训教师,培养出在不同领域的测试,并且接触各种各样的产品,目前市场流行的比如银行业务系统,语音类系 ...

  7. 浅谈.Net Core中使用Autofac替换自带的DI容器

    为什么叫 浅谈 呢?就是字面上的意思,讲得比较浅,又不是不能用(这样是不对的)!!! Aufofac大家都不陌生了,说是.Net生态下最优秀的IOC框架那是一点都过分.用的人多了,使用教程也十分丰富, ...

  8. 浅谈 Fragment 生命周期

    版权声明:本文为博主原创文章,未经博主允许不得转载. 微博:厉圣杰 源码:AndroidDemo/Fragment 文中如有纰漏,欢迎大家留言指出. Fragment 是在 Android 3.0 中 ...

  9. 浅谈 LayoutInflater

    浅谈 LayoutInflater 版权声明:本文为博主原创文章,未经博主允许不得转载. 微博:厉圣杰 源码:AndroidDemo/View 文中如有纰漏,欢迎大家留言指出. 在 Android 的 ...

随机推荐

  1. 从零开始攻略PHP（7）——面向对象（上）

    1.理解面向对象的概念 面向对象软件的一个重要优点是支持和鼓励封装的能力.封装也叫数据隐藏. 在面向对象的软件中,对象是一个被保存数据和操作这些数据的操作方法的唯一.可标识的集合. 对象可以按类进行分 ...

  2. [原创]java WEB学习笔记105：Spring学习---AOP介绍，相关概念，使用AOP，利用 方法签名 编写 AspectJ 切入点表达式

    本博客的目的:①总结自己的学习过程,相当于学习笔记 ②将自己的经验分享给大家,相互学习,互相交流,不可商用 内容难免出现问题,欢迎指正,交流,探讨,可以留言,也可以通过以下方式联系. 本人互联网技术爱 ...

  3. 开发Windows Phone应用程序之后的感觉

    刚刚历时一个多月完成了酒美网(我之前的公司)Windows Phone版客户端,发现自己的自学能力还可以,但是还是有好多东西摸不清,到今天我才刚刚对MVVM入门,更对MVVMLight这个框架有进一步 ...

  4. Python对时间的转换

    1.将字符串的时间转换为时间戳 方法: a = "2013-10-10 23:40:00" 将其转换为时间数组 import time timeArray = time.strpt ...

  5. （三）SQL入门 数据库规格化简介

    什么是数据库的规格化呢,说白了就是为了去除数据库冗余.为了数据库更加容易管理而将大表按照逻辑划分为小表的过程. 什么是数据库的去规格化呢,就是规格化的反面.那么你可能就会问,既然上面说了数据库的规格化 ...

  6. vs2010问题：未能安装xxx包

    打开vs2010新建c++工程,出现问题如图 原因是重复安装了,之前安装的没有删除干净,导致冲突. 如果你的vs2010安装在c盘,解决方法:http://blog.sina.com.cn/s/blo ...

  7. 解决Qualcomm Atheros AR8161 Gigabit Ethernet网卡Linux下坏掉的问题

    我的戴尔(Dell)I2330R-168一体电脑的网卡在升级某个内核版本后,网卡就用一会儿就坏了 ifconfig eth0 eth0: flags=<UP,BROADCAST,RUNNING, ...

  8. SQL2008代理作业出现错误: c001f011维护计划创建失败的解决方法

    SQL2008数据库总会出现从 IClassFactory 为 CLSID 为 {17BCA6E8-A95D-497E-B2F9-AF6AA475916F} 的 COM 组件创建实例失败,原因是出现以 ...

  9. SCALA XML pattern attrbute(属性)

    from: Working with Scala's XML Support 虽然这个guy炒鸡罗嗦,但是还是讲到我要的那句话:  Because Scala doesn't support XML ...

  10. make phpexcel working with XAMPP7.0.9

    Environment XAMPP 7.0.9 (PHP 7.0.9) PHPExcel 1.7.6-1.8.1 not lib_zip.dll Windows 10.1 thinkPHP 5.0.1 ...