关于iscroll插件的一些小用法

一、 在使用iscroll的时候的注意事项:
1 引入iscroll.js文件
页面中head标签下引入 iscroll.js
2 引入初始化代码片段
编辑HTML结构 注意 iScroll作用于滚动区域的外层。只有容器元素的第一个子元素能进行滚动,其他子元素被忽略
初始化片段:

<script type="text/javascript">
var myScroll = new IScroll('#wrapper');
//wrapper:指的是容器的id。当然。类名也行
</script>

4 在容器添加overflow:hidden;

5 注意:当在动态生成的代码中使用,如有图片生成的情况下,注意好图片是否是已经生成
一下代码是获取生成的图片的长度,进而去判断是否全部生成,然后再调用iscroll事件

 // 封装右侧图片的滚动,配合iscroll
    function pyg_scroll() {
        var imgLength = $(".right_class img").length;
        $(".right_class img").on("load", function () {
            // 判断,当图片长度为0的时候,初始化滚动条。因为每次加载完成,图片长度减减                          
            imgLength--;
            if (imgLength == 0) {
    //初始化的iscroll
                rightScroll = new IScroll('.right_class');
            }
        })
    }

二、关于iscroll的点击回到顶部的代码片段
1 先生成一个iscroll对象,然后,调用自身的api

var myScroll = new IScroll('.left_list');//.left_list:指的是容器的类名,id也可以
myScroll.scrollToElement(this);//this:指的是当前点击的对象

猜你喜欢

转载自blog.csdn.net/weixin_41757599/article/details/82631524
今日推荐