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

    <?php //1.php基础语法 //输出语句 echo print print_r var_dump() //2.php是弱类型语言 //强制转换类型:(类型)变量 settype(变量,类 ...

  2. Python 的安装与配置（Windows）

    Python2.7安装配置 python的官网地址:https://www.python.org/ 我这里下载的是python2.7.12版本的 下载后点击安装文件,直接点击下一步知道finally完 ...

  3. 理解水平扩展和垂直扩展 （转载 http://yunjiechao-163-com.iteye.com/blog/2126981）

      当一个开发人员提升计算机系统负荷时,通常会考虑两种方式垂直扩展和水平扩展.选用哪种策略主要依赖于要解决的问题 以及系统资源的限制.在这篇文章中我们将讲述这两种策略并讨论每种策越的优缺点.如果你已经 ...

  4. linux搭建微型git服务器

    1.安装git和git-core yum install git git-core -y 2.创建仓库 mkdir /home/git cd /home/git git init 3.设置可以远程pu ...

  5. Css、javascript、dom(二)

    一.css常用标签及页面布局 1.常用标签 position(定位) z-index(定位多层顺序) background(背景) margin(外边距) padding(内边距) font-size ...

  6. github开发

    从0开始学习 GitHub 系列之「初识 GitHub」 从0开始学习 GitHub 系列之「加入 GitHub」 从0开始学习 GitHub 系列之「Git 速成」 从0开始学习 GitHub 系列 ...

  7. Ubuntu 16.04应用布署小记

    本系列文章记录了升级Ubuntu 16.04的布署过程 回到目录 10. Dokuwiki 将虚拟目录配置文件链接到Apache2的可用的配置文件库中 sudo ln -s /opt/dokuwiki ...

  8. Linux中profile、bashrc、bash_profile之间的区别和联系

    /etc/profile:此文件为系统的每个用户设置环境信息,当用户第一次登录时,该文件被执行.并从/etc/profile.d目录的配置文件中搜集shell的设置. 英文描述为: # /etc/pr ...

  9. java树形目录展示

    package test; import java.awt.Component;import java.awt.Container;import java.util.ArrayList;import ...

  10. IOS UIImageView的contentMode属性

    红框表示imageView的frame,下面的图片是原图大小UIViewContentModeScaleToFill,       默认,对图片进行拉伸处理(不是按比例),是充满bouns UIVie ...