IScroll.js用法

最新推荐文章于 2023-05-15 14:38:01 发布

chenshan5393

最新推荐文章于 2023-05-15 14:38:01 发布

阅读量189

点赞数

文章标签： javascript ViewUI

原文链接：https://my.oschina.net/u/4157959/blog/3069259

版权

是什么：

iscroll.js插件是兼容所有移动端滚动条事件的插件。

1.html格式要求

最好是这样的三层元素嵌套，且最外层的 .food-left 必须要有两个css样式：position:relative 和 overflow：hidden

<div class="food-left">
    <ul class="food-nav">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>

2. 初始化

iscroll.js给了我们一个函数 IScroll构造函数

<script type="text/javascript">
      leftScroll = new IScroll(".food-left");
</script>

注意：必须在DOM结构加载完毕才能初始化，否则无效

3.设置

iscroll.js允许我们传入参数来配置滚动事件的属性

leftScroll = new IScroll(".food-left", {
       scrollbars: true,
       bounce: false,
       mouseWheel:true,
       click:true
});

常用的属性：

* scrollbars：true 是否显示滚动条默认是false

*fadeScrollbars：true 滚动条淡入淡出效果，前提是显示滚动条默认是false

*bounce：false 滚动到达容器边界时是否执行反弹动画，默认是true

*mouseWheel：true；是否启用鼠标滚动默认是false

*scrollX/Y 水平/垂直滚动默认是只有垂直滚动

*startX/Y 设置滚动条初始偏移位置，默认是无

转载于:https://my.oschina.net/u/4157959/blog/3069259

关注