摘要：最近用做了一个端的页面，主要实现了一个弹层滑动选择的功能，效果如图遇到了一个问题，当在底部弹出层进行滚动选择城市区划时，蒙版后的页面也会随着滚动。所以为了让页面滚动的效果如丝般顺滑，从开始，在和上注册的和事件处理函数，会默认为设置。
最近用react做了一个H5端的页面，主要实现了一个弹层滑动选择的功能，效果如图：
遇到了一个问题，当在底部弹出层进行滚动选择城市区划时，蒙版后的页面也会随着滚动。
这种现象在开发过程中经常会遇到，常规思路就是使用event.preventDefault阻止父级元素的滚动：
{this.renderItems()}
滚动事件代码片段
handleTouchMove = (event) => {
event.preventDefault();
...
};
但这波操作过后，却未能如愿以偿，在调试的时候Chrome的告警，如冷冷的冰雨打在我的脸上：
根据告警关键字用Google百度了一番，等到了如下结论：
由于浏览器必须要在执行事件处理函数之后，才能知道有没有调用 preventDefault() ，这就导致了浏览器不能及时响应滚动，略有延迟。所以为了让页面滚动的效果如丝般顺滑，从 chrome56 开始，在 window、document 和 body 上注册的 touchstart 和 touchmove 事件处理函数，会默认为设置passive: true。浏览器忽略 preventDefault() 就可以第一时间滚动了。
细细揣测一番，其实官方的考虑还是有道理的，也是周到的。在CSS中提供了一个属性touch-action，用于指定某个给定的区域是否允许用户操作，以及如何响应用户操作。
据此，我的解决方案就是设置这个CSS属性：
touch-action: none;
感觉总算万事大吉利了，那个手机试一把，用iPhone的Safari浏览器代开后，依然并没有什么卵用。是的，九成是浏览器兼容问题，查看CanIUse，果不其然。
那么既然如此，剩下的解决方案，就只有在绑定事件的时候显式的设置{ passive: false }，查了一圈React文档也没发现，可以支持配置这个属性的方法。此处真心感叹一句不如Vue方便，如果是Vue就可以这么写：
既然如此，就只能用原生的事件绑定了
document.getElementById("picker").addEventListener("touchmove", this.handleTouchMove, { passive: false });
终于，世界和平了。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/102791.html
摘要：最近用做了一个端的页面，主要实现了一个弹层滑动选择的功能，效果如图遇到了一个问题，当在底部弹出层进行滚动选择城市区划时，蒙版后的页面也会随着滚动。所以为了让页面滚动的效果如丝般顺滑，从开始，在和上注册的和事件处理函数，会默认为设置。 最近用react做了一个H5端的页面，主要实现了一个弹层滑动选择的功能，效果如图：showImg(https://segmentfault.com/img...
摘要：最近在使用技术栈重构一个单页应用，其中有个页面是实现城市选择功能，主要是根据城市的首字母来快速跳转到相应位置，比较类似原生中的电话联系人查找功能，页面如图主要问题在上下滑动右侧定位的元素时，页面会跟着一起滑动当然这个现象在开发过程中应该会经 最近在使用 React 技术栈重构一个单页应用，其中有个页面是实现城市选择功能，主要是根据城市的首字母来快速跳转到相应位置，比较类似原生 APP ...
摘要：主要有两种方式和。的私有标签，顶端状态条的样式。禁止数字自动识别为电话号码，这个比较有用，因为一串数字在上会显示成蓝色，样式加成别的颜色也是不生效的。页面禁止复制选中文本 react 移动端 兼容性问题和一些小细节 使用 ES6 的浏览器兼容性问题 react 对低版本的安卓webview 兼容性 iOS下 fixed与软键盘的问题 onClick 阻止冒泡 meta对于移动端的一些...
摘要：主要有两种方式和。的私有标签，顶端状态条的样式。禁止数字自动识别为电话号码，这个比较有用，因为一串数字在上会显示成蓝色，样式加成别的颜色也是不生效的。页面禁止复制选中文本 react 移动端 兼容性问题和一些小细节 使用 ES6 的浏览器兼容性问题 react 对低版本的安卓webview 兼容性 iOS下 fixed与软键盘的问题 onClick 阻止冒泡 meta对于移动端的一些...
阅读 2882·2021-09-22 15:54
阅读 1888·2019-08-30 15:53
阅读 2242·2019-08-29 16:33
阅读 1419·2019-08-29 12:29
阅读 1390·2019-08-26 11:41
阅读 2368·2019-08-26 11:34
阅读 2950·2019-08-23 16:12
阅读 1423·2019-08-23 15:56
