jQuery Plugin To Disable Mouse Scroll On Google Maps - noScrollLayer

File Size: 19.4 KB
Views Total: 1264
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
jQuery Plugin To Disable Mouse Scroll On Google Maps - noScrollLayer

No Scroll Layer is a very lightweight jQuery plugin used to disable mouse scroll events in iframe element, typically used for embedded Google maps. The plugin takes an element and adds a layer on top of it which absorbs scroll and mouse wheel events. Very useful for cases where the element contains, for instance, a map in an iframe and we want to disable zooming in and out of the map. When the user clicks on the element, it is removed, so that interaction with the contents beneath it can be enabled. When the user leaves the element then the no scroll element is re-created.

How to use it:

1. Import jQuery library and the jQuery noScrollLayer plugin's script into the html document.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="jquery.nevma.noScrollLayer-1.0.js"></script>

2. Add your iframe embedded Google map into a DIV container with the CSS class of 'no-scroll-layer' as this:

<div class = "no-scroll-layer">

  <iframe src = "https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3145.2543150778074!2d23.710822715553515!3d37.97119390860681!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x14a1bce23216bc8b%3A0xfad295e22d902ed!2zzqTOsc6yzq3Pgc69zrEgzpTOuc6_zrzOsc-EzqzPgc63z4I!5e0!3m2!1sen!2sgr!4v1464458530549" width = "600" height = "450" frameborder = "0" style = "border:0" allowfullscreen></iframe>

3. That's it. The plugin will look for the 'no-scroll-layer' element on the webpage and initialize the plugin automatically. You're also allowed to config the plugin with the following options:

  // Whether to output debug messages.
  debug : true,

  // Whether to run on default without being called.
  runOnDefault : true,

  // CSS to apply on the main element.
  elementCSS : {
      position: 'relative'

  // Elements to run on default without being called.
  defaultSelector : '.no-scroll-layer',

  // Class to apply to the no scroll layer for style overrides.
  layerClass : 'no-scroll-element',

  // CSS to apply to the no scroll layer.
  layerCSS : {
      position: 'absolute',
      top: '0',
      left: '0',
      width: '100%',
      height: '100%',
      zIndex: '1',
      backgroundColor: 'transparent'

This awesome jQuery plugin is developed by nevma. For more Advanced Usages, please check the demo page or visit the official website.