touch-action css属性 滚动和缩放手势

CSS 属性 touch-action 用于指定某个给定的区域是否允许用户操作，以及如何响应用户操作(比如浏览器自带的划动，缩放等)

默认情况下，平移(滚动) 和 缩放手势由浏览器专门处理。该属性用于取消浏览器默认手势行为，开发人员自定义滚动和手势行为。

touch-action的值：

auto : 当触控事件发送在元素上时，由浏览器来决定进行那些操作，比如viewport进行平滑 缩放。

none : 当触控事件发生在元素上时，不进行任何操作

pan-x : 启用单指水平平移手势

pan-y : 启用单指垂直平移手势。

manipulation : 只可以进行滚动和持续缩放操作。如双击缩放等别的手势

pinch-zoom : 启用多手指平移和缩放页面，这可以和任何平移值组合 如 touch-action:pan-x pan-y pinch-zoom;

 

最常见的用法时禁用元素(及其不可滚动的后代)上的所有手势，以使用自己提供的拖放和缩放的行为

touch-action:none;

还有一个用法是使用指针事件处理水平平移的图片轮播，但不想干扰页面的垂直滚动或缩放

touch-action:pan-y pinch-zoom;

解决双击缩放手势引起的点击事件延迟

touch-action:manipulation;

 

转载于:https://www.cnblogs.com/lantuoxie/p/7519672.html