How To Disable Scroll Effect In Map Using CSS And Jquery

Here we learn about how to disable the scroll effect on the map using CSS and Jquery.

Here is an example of code for disabling scroll on mouse scroll.

<html>
  <body>
    <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>
  </body>
</html>

Rahul Prajapat

I’m Rahul Prajapat. I’m a WordPress developer and Author at TheCodeHubs. I have good skill of Html, CSS, JQuery, SQL, Web API, PSD to HTML/PSD to WordPress, WordPress Theme/Plugin Customization, create or modify short code, customize visual composer short code or integrate new short code with visual composer, can create custom metabox for any post type in WordPress admin.