roberthuttinger roberthuttinger - 5 months ago 25
jQuery Question

Disabling scrolling on event on maps

Found a potential solution, but it didnt seem to work.

$('svg')
.on("mousewheel.zoom", null)
.on("DOMMouseScroll.zoom", null) // disables older versions of Firefox
.on("wheel.zoom", null);


The issue is the map is being redrawn on click event. In some cases the zoom event is not being initialized, but the scrolling is still captured over the SVG element. When the scrolling is 'captured' it prevents the page from scrolling (which is not the desired behaviour). Is there a way to programmatically disable the capturing of the scroll event to zoom over the SVG?

D3 seems to be binding on the fly, and I have even tried explicitly interrupting the bindings to the extreme:

$('.map-container, #map, g, svg, d3, div').off('scroll').unbind('scroll').undelegate('scroll');
$(window).off('scroll').unbind('scroll').undelegate('scroll');
$(document).off('scroll').unbind('scroll').undelegate('scroll');


This may be a failing in my basic knowledge of bindings etc, or perhaps D3 was built in a very resilient way.

Any ideas? (If any answers please explain them, this is curious to me!)

Answer

SOLUTION

It was a matter of getting precedence correct, and using the native function.

This works when calling via button click etc.

 $('.myClass').on('click',function() {
   d3.select('#map')
     .on("mousewheel.zoom", null)
     .on("DOMMouseScroll.zoom", null)
     .on("wheel.zoom", null);
 });

I hope this helps someone else!