iOS5 -webkit-overflow-scrolling导致触摸事件停止工作

iOS5 -webkit-overflow-scrolling 导致触摸事件停止工作

在 iOS5 中，webkit-overflow-scrolling 属性被引入，用于控制元素在内容不超出视口时是否可以通过滚动进行交互。但当设置 -webkit-overflow-scrolling 为 touch 时，会导致触摸事件被截断，从而导致应用程序在触摸事件处理上出现故障。

解决方式：

1. 禁用 -webkit-overflow-scrolling：

可以通过设置 overflow-scrolling: none 禁用 -webkit-overflow-scrolling。

.element {

   overflow-scrolling: none;

}

1. 使用 touch-action: pan-y：

为了解决 iOS5 中的问题，可以使用 touch-action: pan-y，这样用户可以通过在元素上滑动进行滚动，而无需截断触摸事件。

.element {

   touch-action: pan-y;

}

1. 使用 JavaScript 滚动：

如果需要让元素能够被滚动，即使设置了 -webkit-overflow-scrolling: touch，也可以使用 JavaScript 实现滚动。

const element = document.querySelector('.element');

element.scrollTo({ top: element.scrollHeight, behavior: 'smooth' });

通过以上方式，可以解决 iOS5 中 -webkit-overflow-scrolling 导致触摸事件停止工作的问题。