title: D3 disable pan & zoom when scrolling
body: <p>I've rendered a d3 map that has pan and zoom enabled, but when scrolling down the viewport either on desktop or mobile, the window gets stuck zooming in the map.</p>
  
  <p>Is there a way to temporarily disable d3.zoom, while the window is scrolling?</p>
  
  <p>I've seen ways of toggling the zoom/pan using a button as seen here: <a href="http://jsfiddle.net/0xncswrk/" rel="nofollow noreferrer">http://jsfiddle.net/0xncswrk/</a>, but I wanted to know if it's possible without having to add a button.  Here's my current zoom logic.</p>
  
  <p>Thanks!</p>
  
  <pre><code>this.zoom = d3.zoom()
    .scaleExtent([1, 8])
    .on('zoom', () =&gt; {
      this.svg.attr('transform', d3.event.transform);
    });
  
  this.svg = d3.select(this.el).append('svg')
      .attr('width', '100%')
      .attr('height', this.height)
      .attr('class', 'bubble-map__svg-us')
      .call(this.zoom)
      .append('g');
  </code></pre>