css 阻止鼠标滚动到Google地图上

Posted 2021-05-13

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