浅谈一下关于iscroll的使用心得

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

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

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

 

iscoll4-------------------

 

需要使用这个文件配合使用 

把需要滚动的区域放置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, 这样就能解决问题。

 

iscroll5------------------------

 

 

这是一个测试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