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

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";