#StackBounty: #javascript #d3.js #zoom Can't touch scroll vertically on mobile on D3 SVG with d3-zoom

Bounty: 150

I have a d3 graph with an SVG enabled with d3-zoom. Simply put, I have configured zoom to allow the user to pan (and only pan) on the x axis (and only the x axis):

const zoom = d3.zoom()
  .scaleExtent([1, 1]) // scale 1x to 1x (no zooming)
  .translateExtent([[
      xExtent,
      0
  ], [
      // Bottom right extent: [center of last age, graph height]
     rightExtent,
      graphHeight
  ]])
  .on('zoom', this.zoom)
  .on('start', this.zoomStart)
  .on('end', this.zoomEnd)
  
svg.call(zoom)
  .on('wheel.zoom', null);

This has worked so far and allows the user to pan around the X-axis on both mobile and desktop devices.

The problem is, on iOS and Android, when touching the graph to scroll down on the page, the page remains in place – the scroll events are somehow being intercepted by d3-zoom.

I have looked all over the d3-zoom docs and have not found anything except this statement: "If the user tries to zoom by wheeling when already at the corresponding limit of the scale extent, the wheel events will be ignored and not initiate a zoom gesture. This allows the user to scroll down past a zoomable area after zooming in, or to scroll up after zooming out.". My problem is that I am still having an issue on mobile devices scrolling past the graph.

I have also scoured SO and discovered this question, with a partial answer that is incomplete to what I need: D3 disable pan & zoom when scrolling

How can I use zoom on my SVG while also being able to scroll on mobile devices? If needed I am willing to completely disable “vertical” panning on the SVG if that is possible with d3, I just need to be able to scroll the page while also panning to the right and left on the X axis.


Get this bounty!!!

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.