javascript - css touch-action none on body, pinch-zoom on element

Question

我正在尝试应用这个:

body {
  touch-action: none;
}

.left-side {
  touch-action: pinch-zoom;
}

<div class="left-side"><img src="image.jpg" /></div>

触摸 Action :没有工作，但现在左侧是:(

我做错了什么？还是 body 压倒了一切？

Answer 1

touch-action 值 pinch-zoom 是一种修饰符。根据The MDN spec ，它与其他值结合使用:

The touch-action property may be specified as either:

• any one of the keywords auto, none, manipulation, or
• one of the keywords pan-x, pan-left, pan-right, and/or one of the keywords pan-y, pan-up, pan-down, plus optionally the keyword pinch-zoom.

pinch-zoom 本身什么都不做，它只是让浏览器知道它应该允许使用两个手指手势；控制与其一起列出的操作。

所以如果你想让多指支持横向平移页面，你可以使用:

.left-side {
   touch-action: pan-x pinch-zoom;
}

注意:请记住，此功能仅适用于触摸设备；鼠标和可访问系统不会反射(reflect)任何功能更改。