iOS5 -webkit-overflow-scrolling 导致触摸事件停止工作
在 iOS5 中,webkit-overflow-scrolling 属性被引入,用于控制元素在内容不超出视口时是否可以通过滚动进行交互。但当设置 -webkit-overflow-scrolling 为 touch 时,会导致触摸事件被截断,从而导致应用程序在触摸事件处理上出现故障。
解决方式:
可以通过设置 overflow-scrolling: none
禁用 -webkit-overflow-scrolling。
.element {
overflow-scrolling: none;
}
为了解决 iOS5 中的问题,可以使用 touch-action: pan-y
,这样用户可以通过在元素上滑动进行滚动,而无需截断触摸事件。
.element {
touch-action: pan-y;
}
如果需要让元素能够被滚动,即使设置了 -webkit-overflow-scrolling: touch,也可以使用 JavaScript 实现滚动。
const element = document.querySelector('.element');
element.scrollTo({ top: element.scrollHeight, behavior: 'smooth' });
通过以上方式,可以解决 iOS5 中 -webkit-overflow-scrolling 导致触摸事件停止工作的问题。
领取专属 10元无门槛券
手把手带您无忧上云