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>

Submit a Comment

Your email address will not be published. Required fields are marked *

Footer Logo

Subscribe

Select Categories