移动端插件IScroll.js应该如何使用

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

注意

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

    
            
  •         
  •         
  •         
  •     

登录后复制

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

初始化

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

      leftScroll = new IScroll(".food-left");

登录后复制

构造函数中传入的实参,与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,如果要移动需要设置负数;

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

相关阅读:

nodej中的xml2js需要如何使用

node.js的path模块详解

以上就是移动端插件IScroll.js应该如何使用的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2784798.html

(0)
上一篇 2025年3月8日 17:15:45
下一篇 2025年3月8日 17:15:50

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • 实例详解js异步编程

    javascript语言的执行环境是”单线程”(single thread)。所谓”单线程”,就是指一次只能完成一件任务。如果有多个任务,就必须排队,前面一个任务完成,再执行后面一个任务,以此…

    编程技术 2025年3月8日
    100
  • JS继承之寄生式继承

    一听到“寄生式继承”这个名词很容易产生畏难感,这是个什么东东呢?别急,本篇文章将尝试用通俗易懂的方式阐述js中的这种继承方式,希望能帮助到大家。 一、一个例子 我们先定义一个空函数,形参是original,就像下面这样: function …

    编程技术 2025年3月8日
    200
  • Switchery.js的图文详解

    这次给大家带来switchery.js的图文详解,使用switchery.js的注意事项有哪些,下面就是实战案例,一起来看一下。 这是项目中用到的一个仿照苹果IOS7的滑动按钮插件。 Switchery是一个简单的组件,它可以帮助你把你的默…

    2025年3月8日 编程技术
    200
  • js执行顺序分析

    JavaScript是一种描述型脚本语言,由浏览器进行动态的解析与执行。函数的定义方式大体有以下两种,浏览器对于不同的方式有不同的解析顺序。本文主要和大家分享js执行顺序分析,希望能帮助到大家。 代码如下:  //“定义式”函数定义 fun…

    编程技术 2025年3月8日
    200
  • js中作用域与函数闭包实例讲解

    本文主要和大家分享js中作用域与函数闭包实例,1.作用域很简单,只是简单的点一下,js的作用域没有块级作用域,只有全局作用域与函数作用域; 例如: if(true){var a=100;}console.log(a); 登录后复制 在jav…

    编程技术 2025年3月8日
    200
  • js全局和局部变量及运算符知识分享

    一、本文主要和大家分享js全局和局部变量及运算符知识,首先我们先和大家讲解局部变量和全局变量 的相关知识,希望能帮助到大家。 二、局部变量和全局变量 局部变量:在js函数内部声明的变量时局部变量,所以只能在函数内部访问它,即该变量的作用域是…

    编程技术 2025年3月8日
    200
  • js单例模式之创建弹窗实例分享

    一、了解单例模式     单例模式的定义:保证一个类仅有一个实例,并提供一个访问他的全局访问点     单例模式的核心:是确保只有一个实例,并提供全局访问 二、javascript中的单例模式     在js中,我们经常会把全局变量当做单例…

    编程技术 2025年3月8日
    200
  • 用Angularjs+mybatis做出评论系统

    这次给大家带来用angularjs+mybatis做出评论系统,用angularjs+mybatis做评论系统的注意事项有哪些?下面就是实战案例,一起来看一下。 一直想写个评论系统,看了下多说,网易,简书的评论,想了下自己该实现怎样的评论系…

    2025年3月8日
    200
  • js数组去重与去扁平化详解

    本文主要和大家分享js数组去重与去扁平化详解希望能帮助到大家。 数组去重 var arr = [1, 43, 4, 3, 2, 4, 3];  // 去重后    arr = [1, 43, 4, 3, 2] 传统方法,for循环实现 fu…

    编程技术 2025年3月8日
    200
  • Node.js的PEGjs该如何使用

    这次给大家带来node.js的pegjs该如何使用,在node.js中使用pegjs的注意事项有哪些,下面就是实战案例,一起来看一下。 (1)安装pegjs npm install pegjs 登录后复制 (2)grammer.pegjs …

    编程技术 2025年3月8日
    200

发表回复

登录后才能评论