How to disable scroll effect in map html using css and jquery
Below is a sample of code for disable scroll on mouse scroll
<style>
.scrolloff {
pointer-events: none;
}
</style>
<div id="googlemap" class="map">
<iframe id="gmap" src="https://www.google.com/maps/embed/v1/place?key=AIzaSyCjUE83FHrXTQWf9umcNDzyu0s7aNzHszw
&q=Space+Needle,Seattle+WA" width="100%" height="500" frameborder="0" ></iframe>
</div>
<script>
$(document).ready(function () {
$('#gmap').addClass('scrolloff');
$('#googlemap').on("mouseup",function(){
$('#gmap').addClass('scrolloff');
});
$('#googlemap').on("mousedown",function(){
$('#gmap').removeClass('scrolloff');
});
$("#gmap").mouseleave(function () {
$('#gmap').addClass('scrolloff');
});
});
</script>
<style>
.scrolloff {
pointer-events: none;
}
</style>
<div id="googlemap" class="map">
<iframe id="gmap" src="https://www.google.com/maps/embed/v1/place?key=AIzaSyCjUE83FHrXTQWf9umcNDzyu0s7aNzHszw
&q=Space+Needle,Seattle+WA" width="100%" height="500" frameborder="0" ></iframe>
</div>
<script>
$(document).ready(function () {
$('#gmap').addClass('scrolloff');
$('#googlemap').on("mouseup",function(){
$('#gmap').addClass('scrolloff');
});
$('#googlemap').on("mousedown",function(){
$('#gmap').removeClass('scrolloff');
});
$("#gmap").mouseleave(function () {
$('#gmap').addClass('scrolloff');
});
});
</script>
Comments
Post a Comment