iScroll.js 使用心得

Posted 2020-10-20 DarthBadwolf

iScroll.js是一款滑动插件, 使用iScroll.js可以让网页的一些滚动效果变得更平滑, 用户体验更好.
一般的使用就像网上所说的那样, 在引入了iscroll.js后, iscroll的最小使用粒度:

<div id="wrapper">
    <ul>
        <li>...</li>
        <li>...</li>
        ...
    </ul>
</div>

var myScroll = new IScroll(‘#wrapper‘);

这样就能是ul上挂在滑动效果.
还可以配置一些参数如:

var myScroll = new IScroll(‘#wrapper‘, { mouseWheel: true, scrollbars: true });

我一般习惯在进行请求的时候把iscroll实例化, 例如

    var myScroll;
    function render_list(){
        $.getJSON(ApiUrl + ‘‘, {gc_id:gc_id}, function(result){
        var data = result.datas;
        data.WapSiteUrl = WapSiteUrl;
        var html = template.render(‘c-second-tmpl‘, data);
        $("#wrapper").html(html);
        myScroll = new IScroll(‘#wrapper‘, { mouseWheel: true, click: true });
    }

使用iscroll时碰到的一些问题以及解决方案

1. ul上已经加载进效果, 但是没有任何反应.
   解决:其他很多方案网上都能搜到了,我遇到的原因是我把<ul>标签设置了height: 100%,导致无法滚动.在#wrapper上设置高度为100%是完全没问题的,但是里面挂在iscroll的标签上如果高度为100%, 就有可能会出现无法滚动的问题.

2. 有一些写的很复杂或者继承了很多css属性的wrapper和<ul>标签, 有可能因为属性太复杂而使得ul或者wrapper上的css属性没有清干净而无法生效...我现在就是遇到了这个问题, 我怀疑是css样式过多, 但是清除了之后也没有效果, 还要进一步排查...

3. 做一个有二级的面包屑样式, 两级都加载了iscroll, 但是在第一次点击二级ul的时候, 没有滚动效果出来, 必须在点击一次一级菜单(第2点里死活加载不上iscroll)后, 二级菜单才有滚动效果...初步怀疑是二级菜单在一开始没有初始化, 导致iscroll也没有一起加载...