前言
iScroll运用比较广泛,主要用于移动端。iScroll是一个类,每个需要使用滚动功能的区域均要进行初始化。每个页面上的iScroll实例数目在设备的CPU和内存能承受的范围内是没有限制的。
初始化
let myScroll = new IScroll('#wrapper', {
mouseWheel: true,
scrollbars: 'custom',
shrinkScrollbars : 'clip',
probeType: 2,
click: true
});
- mouseWheel 是开启了鼠标滚轮支持
- scrollbars 是否显示为默认的滚动条,默认为false。在IScroll中,它的滚动条是由两个做了定位的div构成的,设置为custom,可以自定义滚动条。在样式表中使用两个类名:.iScrollIndicator和.iScrollVerticalScrollbar.iScrollLoneScrollbar写入样式,这样组成滚动条的两个div就可以显示出来了。
- shrinkScrollbars 滚动超出滚动边界,是否收缩滚动条。设置为clip,裁剪超出的滚动条。
- probeType 为2,滚动时每隔一定时间触发
- click 是否启用click事件,默认false
问题:
但现在遇到的问题就是ios系统滚动完全没问题,之前的安卓(9.0以前)也没问题。最近华为上新了安卓9.0的系统,出现了页面上拉加载无效,只能进行点选状态。如果想上拉加载,只能一点一点的向上挪动。
网上找了很多资料,再加上iscroll官网打不开,忧心忡忡。。。
找了好久,发现只要在初始化中再多配置两个参数:
disableMouse: true,
disablePointer: true,
- disableMouse 是否关闭鼠标事件探测。如知道运行在哪个平台,可以开启它来加速。
- disablePointer 是否关闭指针事件探测。如知道运行在哪个平台,可以开启它来加速。
主要是下面这个属性起作用,但是会报错
//[干预]由于目标被视为被动,无法阻止被动事件监听器内的默认。 请参阅<URL>
[Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See <URL>
See https://www.chromestatus.com/features/5093566007214080
刚开始以为是iScroll插件里面的preventDefault造成的,于是把调用这个方法的地方,全部加了一个判断,即:
if (event.cancelable) {
// 判断默认行为是否已经被禁用
if (!event.defaultPrevented) {
event.preventDefault();
}
}
但是不起作用,这个问题确实是google浏览器做了更新所导致的的。可能是针对自定义的tap事件吧(自定义事件是在click参数进行配置),在这里没起到作用
终于,获取到了一行css的神代码:
touch-action: manipulation;
- 作用:浏览器只允许进行滚动和持续缩放操作。任何其它被auto值支持的行为不被支持。启用平移和缩小缩放手势,但禁用其他非标准手势,例如双击以进行缩放。 禁用双击可缩放功能可减少浏览器在用户点击屏幕时延迟生成点击事件的需要。
到这,安卓9.0才能正常进行滚动,测试了之前的版本安卓7.0以及ios系统也是可以的。。。