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>

Comments

Popular posts from this blog

How to add image option in nav menu in wordpress

How to add a custom email functionality in woocommerce,wordpress for example new email template for shipping order

How to change user id on checkout page for assign order to different user in woocommerce wordpress