React中禁止页面滚动

最近用react做了一个H5端的页面,主要实现了一个弹层滑动选择的功能,效果如图:
React中禁止页面滚动_第1张图片
遇到了一个问题,当在底部弹出层进行滚动选择城市区划时,蒙版后的页面也会随着滚动。

这种现象在开发过程中经常会遇到,常规思路就是使用event.preventDefault阻止父级元素的滚动:

{this.renderItems()}

滚动事件代码片段

handleTouchMove = (event) => {
    event.preventDefault();
    ...
};

但这波操作过后,却未能如愿以偿,在调试的时候Chrome的告警,如冷冷的冰雨打在我的脸上:
React中禁止页面滚动_第2张图片
根据告警关键字用Google百度了一番,等到了如下结论:

由于浏览器必须要在执行事件处理函数之后,才能知道有没有调用 preventDefault() ,这就导致了浏览器不能及时响应滚动,略有延迟。

所以为了让页面滚动的效果如丝般顺滑,从 chrome56 开始,在 window、document 和 body 上注册的 touchstarttouchmove 事件处理函数,会默认为设置passive: true。浏览器忽略 preventDefault() 就可以第一时间滚动了。

React中禁止页面滚动_第3张图片
据此,我的解决方案就是设置这个CSS属性:

touch-action: none;

感觉总算万事大吉利了,那个手机试一把,用iPhone的Safari浏览器代开后,依然并没有什么卵用。是的,九成是浏览器兼容问题,查看CanIUse,果不其然。
React中禁止页面滚动_第4张图片
那么既然如此,剩下的解决方案,就只有在绑定事件的时候显式的设置{ passive: false },查了一圈React文档也没发现,可以支持配置这个属性的方法。此处真心感叹一句不如Vue方便,如果是Vue就可以这么写:

既然如此,就只能用原生的事件绑定了

document.getElementById("picker").addEventListener('touchmove', this.handleTouchMove, { passive: false });

终于,世界和平了。

你可能感兴趣的:(javascript,事件绑定,safari,chrome,css)