RPeraltaJr
4/21/2017 - 3:44 PM

Prevent mouse scroll over Google Maps

Prevent mouse scroll over Google Maps

<div class="iframe-container">
    <iframe class="actAsDiv" id="myiFrame" src="https://a.tiles.mapbox.com/v4/rvno12.ped3hmmm/attribution,zoompan,zoomwheel,geocoder,share.html?access_token=pk.eyJ1IjoicnZubzEyIiwiYSI6InVVbXhUam8ifQ.vYxp4PFKqTHJCvnnqqMybg" style="border:0px #FFFFFF none;" name="myiFrame" scrolling="no" frameborder="0" marginheight="0px" marginwidth="0px" height="500px" width="100%" seamless></iframe>
</div>
// Prevent mouse scroll over Google maps iframe
$(document).ready(function () {
    // you want to enable the pointer events only on click;

    $('#myiFrame').addClass('scrolloff'); // set the pointer events to none on doc ready
    $('.iframe-container').on('click', function () {
        $('#myiFrame').removeClass('scrolloff'); // set the pointer events true on click
    });

    // you want to disable pointer events when the mouse leave the canvas area;

    $("#myiFrame").mouseleave(function () {
        $('#myiFrame').addClass('scrolloff'); // set the pointer events to none when mouse leaves the map area
    });
});
.scrolloff {
  pointer-events: none;
}