html 从滚动中禁用嵌入式Google地图

Posted 2021-05-11

http://webdesignandsuch.com/how-to-disable-mouse-wheel-scrolling-on-an-embedded-google-map/


<div class="map-wrap">
    <div class="overlay" onClick="style.pointerEvents='none'"></div><!-- wrap map iframe to turn off mouse scroll and turn it back on on click -->

    <iframe class="map" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d193588.80258659853!2d-74.12906269315698!3d40.69985076621476!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c24fa5d33f083b%3A0xc80b8f06e177fe62!2sNew+York%2C+NY!5e0!3m2!1sen!2sus!4v1446647383676" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

</div>



CSS:

.map {
	width:100%;
	height:500px;	
}


.map-wrap {
	position:relative; 
}
	
.overlay {
	width:100%;
	min-height:500px; 
	position:absolute; 
	top:0;
}