视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
移动端插件IScroll.js应该如何使用
2020-11-27 20:01:48 责编:小采
文档


我们知道,IScroll.js插件是兼容所有移动端滚动条事件的插件,在一些安卓机中,我们没法通过overflo:scroll操作滚动条;但IScroll.js确可以放在安全的容器元素中处理滚动,下面就给大家详细介绍一下IScroll.js。

注意

在使用IScroll.js必须要有3层元素嵌套,如:

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

最外层的food-left必须要有两个css样式:position:relative;和overflow:hidden。

初始化

IScroll.js给我们暴露了一个IScroll构造函数;
如下,我们进行了初始化

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

构造函数中传入的实参,与ES6新增的querySelector参数一致;其实querySelector就与我们的jQuery选择器使用方式是一样的;
注意:我们必须在DOM结构加载完毕后才能初始化,否则会无效。

设置

IScroll.js允许我们传入第二个参数来配置滚动事件的属性;

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

滚动条

scrollbars: true

是否显示滚动条。默认为false;

fadeScrollbars:true

滚动条淡入淡出效果,当然前提是你滚动条显示了。默认为false;

interactiveScrollbars

是否拖动滚动条。默认为false;

resizeScrollbars

滚动条的长度是按照比例设置的,如果想要固定尺寸,可以设置为flase;默认为true;

bounce: false

滚动到达容器边界时是否执行反弹动画。默认为true;

mouseWheel:true

是否显示启用鼠标滚动;默认为false;

invertWheelDirection

激活鼠标滚动后是否启用反向滚动;默认为false;

click:true

iScroll禁止默认鼠标的点击行为,如果要使用设置true;默认为false;

disableMouse、disablePointer、options.disableTouch

IScrol默认监听所有的指针事件,如果确认项目定位的平台,可以将不使用的效果禁用,减少资源占用;默认为false;

startX、startY

设置滚动条初始偏移位置;默认为无;

方法

IScroll.js也给我们提供一些方便的方法,当然都是实例对象下的;

rightScroll.scrollToElement(el, time, offsetX, offsetY, easing)

滚动到传入元素的位置,必须是原生DOM对象;然后是滚动的时间;

scrollTo(x, y, time, easing)

可以滚动到任意的位置,默认位置是0,如果要移动需要设置负数;

相信看了这些案例你已经掌握了方法,更多精彩请关注Gxl网其它相关文章!

相关阅读:

nodej中的xml2js需要如何使用

node.js的path模块详解

下载本文
显示全文
专题