How to prevent page scrolling when pinch-zooming with Pointer Event?

Question

I've got functionality that allows to zoom images in and out, and it works properly if there's no scrollable parent element. But when there is a scrollable parent, it doesn't work properly.

The thing is touch-action: none can't be used directly, because it prevents a page from scrolling, but I want to allow users to scroll the page only if one finger is down, and allow to zoom an image if two fingers are down.

It's strange, but the code below wouldn't work:

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

Is there a way to combine page scrolling and pinch-zooming?

Answer 1

Oh, I was young and silly)) I had to do this:

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