使用指针事件进行缩放时，如何防止页面滚动

Question

我有允许放大和缩小图像的功能，如果没有可滚动的父元素，它可以正常工作。但是，当有一个可滚动的父级时，它就不能正常工作。

问题是touch-action: none不能直接使用，因为它可以阻止页面滚动，但我想允许用户只有在一根手指向下时才能滚动页面，如果两个手指向下，则允许缩放图像。

这很奇怪，但下面的代码不起作用：

let fingerCount; // Assume that it has the right value
element.addEventListener("pointerdown", e => {
if (fingerCount === 2) {
// This line will be ignored
element.style.touchAction = "none";
}
});

有没有一种方法可以将页面滚动和缩放结合起来？

Answer 1

哦，我很年轻，很傻((我不得不这么做：

// This line has to be outside of `pointerdown`
element.style.touchAction = "pan-y";