Maybe touch-action:none; only after first Zoom Event ?

[VonZubinski]

I would really like to use Zoomist in a current project, unfortunately, if implement on mobile the whole image container becomes a "deadzone" for scrolling. Especially when a bigger portrait image occupies a lot of screen real estate, the user has to search for some left over whitespace to continue scrolling.

To counter this problem, I was planning to set the container class to touch-action: manipulation; and change it to none in case of a zoom event.

From my understanding, I would have to give every container some kind of id-name and have it initialised separately.
Is it possible, to keep that naming global and trigger that css change with zoom(zoomist, scale) {...} only for the zoomist-container that is being used ?

[cotton123236]

This is indeed a tricky situation, because set touch-action to none is necessary for zooming or dragging on mobile devices.

On current situation, maybe you can try these following code:

const containers = document.querySelectorAll('.zoomist-container')
containers.forEach(container => {
  new Zoomist(container, {
    on: {
      zoom() {
        container.style.setProperty('touch-action', 'none')
        // or what you plan to do
      }
    }
  })
})

I will try to find a solution to this problem and maybe fix it in the next version.
Thanks!

[cotton123236]

Hey @VonZubinski ,

Thanks for your suggestion, I implemented it on v2.1.0!
Now you can enable touch events to allow for further page scrolling by setting option dragReleaseOnBounds to true, and enable wheel events by setting option wheelReleaseOnMinMax to true.

Sorry for taking so long time, enjoy it!

[jaco-terbraak]

@cotton123236 Thanks, this mostly works. However I noticed that on mobile, the first scroll gesture does nothing. Only after removing the scrolling finger form the screen, and scrolling again, the scrolling actually works. So there seems to still be a small bug there.

[cotton123236]

@jaco-terbraak
that is because touchmove event doesn't take e.preventDefault(), so I can only set e.preventDefault() when touchstart every time. I've tried many methods and this is the best I can do. 🥲

[jaco-terbraak]

@cotton123236 Fair enough, thanks for looking into it