因为最近的项目所有页面老板想做成苹果原生那种上下拉动有回弹效果的体验，浏览器自带是没有这种功能的，自己写的话兼容性可能会出大问题，要适配安卓的各种机型实在是难，所以我还是选择去使用移动端相对比较稳定的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. 使用DiskFileItemFactory 实现文件上传 ，设定缓冲区大小和存放临时文件目录。

    DiskFileItemFactory有两个方法 :setSizeThreshold和.setRepository 1. setRepository方法用于设置当上传文件尺寸大于setSizeThre ...

  2. MWeb 2.0 测试版可以下载啦，这次是公开测试，感兴趣的朋友可以试试

    2.0 版是 MWeb 发布以来,最重要的一个版本.MWeb 自去年一月份发布以来,获得了很多朋友的建议,在此非常感谢!没有你们,2.0 版可能就不能出来!然后再次感谢 Producter: http ...

  3. iPad Pro分辨率

    iPad Pro分辨率  为 2732 x 2048

  4. Hybrid技术的设计与实现（转）

    浅谈Hybrid技术的设计与实现 前言 随着移动浪潮的兴起,各种APP层出不穷,极速的业务扩展提升了团队对开发效率的要求,这个时候使用IOS&Andriod开发一个APP似乎成本有点过高了,而 ...

  5. WebSQL 查询工具

    最近在写 WebSQL ,每次都在浏览器控制台执行 SQL 太费劲了,并且脑子不好使,总是忘记上次初始化的数据库是什么,所以写了一个特别简单的 WebSQL 可视化工具,说工具有点大了,就是为了方便, ...

  6. Introduction to Big Real Mode

    转自Merck Hung merck@olux.org, 洪豪謙 应朋友的要求, 希望我花一点时间整理一下 x86 Big Real Mode 的文章.另外也发现, 身边似乎有一些朋友也准备要开始从事 ...

  7. [SQL入门级] 接上篇，继续查询

    距离上一篇时间隔得蛮久了,这篇继续查询,简单总结一下聚合函数.分组的知识. 一.聚合函数(组函数/多行函数) 何谓多行函数,顾名思义就是函数作用于多行数据得出一个输出结果,什么意思呢?看图: 那么常用 ...

  8. 关于ibatis中mysql的@变量问题作用域、污染问题

    搞了1天,过程不想多说,结论如下: ibatis.net 是有连接池的,用ab.exe 并发测试,可以测出默认的max连接数 ibatis.net的数据操作 xml 中可以用@变量,也就是 Sessi ...

  9. Windows Azure Virtual Machine 之用程序控制Azure VM

    我们在很多时候可能会需要用程序来控制VM的创建,删除工作. 而在这些工作之中,用程序创建一个VM将会是一个非常复杂的过程,因为他涉及到很多步骤. 具体步骤如下 1 创建一个Hosted cloud s ...

  10. asp.net 事件加载顺序

    下面是母版页与内容页合并后事件的发生顺序: 母版页控件 Init 事件. 内容控件 Init 事件. 母版页 Init 事件. 内容页 Init 事件. 内容页 Load 事件. 母版页 Load 事 ...