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;
}