iScroll配置和理解核心

本文介绍了iScroll的配置选项,包括如何初始化、如何理解核心工作机制。配置选项如useTransform、useTransition和HWCompositing等可以调整iScroll的滚动引擎。此外,文章还讨论了bounce、click、disableMouse等选项,以及如何处理原生滚动和事件监听。通过理解这些配置,可以更好地优化iScroll在不同设备和场景下的表现。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

配置

在iScroll初始化阶段可以通过构造函数的第二个参数配置它。

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

上面的例子示例了在iScroll初始化时开启鼠标滚轮支持和滚动条支持。

在初始化后你可以通过options对象访问标准化值。例如: js console.dir(myScroll.options);
上面的语句将返回myScroll实例的配置信息。所谓的标准化意味着如果你设置useTransform:true,但是浏览器并不支持CSS
transforms,那么useTransform属性值将为false。

理解核心

iScroll使用基于设备和浏览器性能的各种技术来进行滚动。通常不需要你来配置引擎,iScroll会为你选择最佳的方式。

尽管如此,理解iScroll工作机制和了解如何去配置他们也是很重要的。

options.useTransform

默认情况下引擎会使用CSStransform属性。如果现在还是2007年,那么可以设置这个属性为false,这就是说:引擎将使用top/left属性来进行滚动。
这个属性在滚动器感知到Flash,iframe或者视频插件内容时会有用,但是需要注意:性能会有极大的损耗。
默认值:true

options.useTransition

iScroll使用CSS transition来实现动画效果(动量和弹力)。如果设置为false,那么将使用requestAnimationFrame代替。
在现在浏览器中这两者之间的差异并不明显。在老的设备上transitions执行得更好。
默认值:true

options.HWCompositing

这个选项尝试使用translateZ(0)来把滚动器附加到硬件层,以此来改变CSS属性。在移动设备上这将提高性能,但在有些情况下,你可能想要禁用它(特别是如果你有太多的元素和硬件性能跟不上)。
默认值:true

如果不确定iScroll的最优配置。从性能角度出发,上面的所有选项应该设置为true。(或者更好的方式,让他们自动设置属性为true)。你可以尝试这配置他们,但是要小心内存泄漏。

基本功能

options.bounce

当滚动器到达容器边界时他将执行一个小反弹动画。在老的或者性能低的设备上禁用反弹对实现平滑的滚动有帮助。
默认值:true

options.click

为了重写原生滚动条,iScroll禁止了一些默认的浏览器行为,比如鼠标的点击。如果你想你的应用程序响应click事件,那么该设置次属性为true。请注意,建议使用自定义的tap 事件来代替它(见下面)。
默认属性:false

options.disableMouse

options.disablePointer

options.disableTouch

默认情况下,iScroll监听所有的指针事件,并且对这些事件中第一个被触发的做出反应。这看上去是浪费资源,但是在大量的浏览器/设备上兼容,特定的事件侦测证明是无效的,所以listen-to-all是一个安全的做法。

如果你有一种设备侦测的内部机制,或者你知道你的脚本将在什么地方运行,你可以把你不需要的事件禁用(鼠标,指针或者触摸事件)。
下面的例子是禁用鼠标和指针事件:

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

默认值:false

options.eventPassthrough

有些时候你想保留原生纵向的滚动条但想为横向滚动条增加iScroll功能(比如走马灯)。设置这个属性为true并且iScroll区域只将影响横向滚动,纵向滚动将滚动整个页面。

在移动设备上访问event passthrough demo。注意,这个值也可以设置为horizontal,其作用和上面介绍的相反(横向滚动条保持原生,纵向滚动条使用iScroll)。

options.freeScroll

此属性针对于两个两个纬度的滚动条(当你需要横向和纵向滚动条)。通常情况下你开始滚动一个方向上的滚动条,另外一个方向上会被锁定不动。有些时候,你需要无约束的移动(横向和纵向可以同时响应),在这样的情况下此属性需要设置为true。请参考 2D scroll demo
默认值:false

options.keyBindings

此属性为true时激活键盘(和远程控制)绑定。请参考下面的Key bindings内容。
默认值:false

options.invertWheelDirection

当鼠标滚轮支持激活后,在有些情况下需要反转滚动的方向。(比如,鼠标滚轮向下滚动条向上,反之亦然)。
默认值:false

options.momentum

在用户快速触摸屏幕时,你可以开/关势能动画。关闭此功能将大幅度提升性能。
默认值:true

options.mouseWheel

侦听鼠标滚轮事件。
默认值:false

options.preventDefault

当事件触发时师傅执行preventDefault()。此属性应该设置为true,除非你真的知道你需要怎么做。
请参考下面的Advanced features中的preventDefaultException,可以获取更多控制preventDefault行为的信息。
默认值:true

options.scrollbars

是否显示为默认的滚动条。更多信息请查看Scrollbar
默认值:false

options.scrollX

options.scrollY

默认情况下只有纵向滚动条可以使用。如果你需要使用横向滚动条,需要将scrollX 属性值设置为 true。请参考示例horizontal demo

也可以参考freeScroll选项。

默认值:scrollX: false,scrollY: true

注意属性 scrollX/Y: true 与overflow: auto有相同的效果。设置一个方向上的值为 false 可以节省一些检测的时间和CPU的计算周期。

options.startX

options.startY

默认情况下iScroll从0, 0 (top left)位置开始,通过此属性可以让滚动条从不同的位置开始滚动。
默认值:0

options.tap

设置此属性为true,当滚动区域被点击或者触摸但并没有滚动时,可以让iScroll抛出一个自定义的tap事件。
这是处理与可以点击元素之间的用户交互的建议方式。侦听tap事件和侦听标准事件的方式一致。示例如下:

element.addEventListener(‘tap‘, doSomething, false); \\ Native
$(‘#element‘).on(‘tap‘, doSomething); \\ jQuery

你可以通过传递一个字符串来自定义事件名称。比如:

tap: ‘myCustomTapEvent‘

在这个示例里你应该侦听名为myCustomTapEvent的事件。
默认值:false

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值