Added the closeOnScroll option.

README.md

@@ -100,5 +100,6 @@ Options that could be specified in directive value
 | closed | Function that will be executed on gallery close | undefined | function |
 | changed(imageIndex) | Function that will be executed when switching between images in gallery | undefined | function |
 | cursor | Cursor when hovering original `<img>` | 'pointer' | string |
+| closeOnScroll | Determines if the gallery should close upon scrolling. NOTE: If this option is set to false, the page will not scroll when the gallery is open. | true | boolean |
 
 * Any of these options except `opened`, `closed`, `changed` functions and `openOn` property could be changed at runtime.

lib/ImgScreen.vue

@@ -82,10 +82,22 @@ export default {
       uiTimeout: null,
       handlers: {},
       thumbnails: false,
+      closeOnScroll: false,
     };
   },
   watch: {
     closed(newVal) {
+      // Disable scrolling when the gallery is visible and the
+      // closeOnScroll option is false.
+      if(!this.closeOnScroll) {
+        if (this.closed) {
+          document.documentElement.style.overflow = 'auto';
+        }
+        else {
+          document.documentElement.style.overflow = 'hidden';
+        }
+      }
+
       if (newVal && this.handlers.closed) {
         this.handlers.closed();
       }
@@ -159,7 +171,9 @@ export default {
       if (e.keyCode === 37 || e.keyCode === 72) this.prev();
     });
     window.addEventListener('scroll', () => {
-      this.close();
+      if (this.closeOnScroll) {
+        this.close();
+      }
     });
     window.addEventListener('mousemove', () => {
       this.showUI();

lib/index.js

@@ -12,6 +12,7 @@ const addPluginAttributes = (el, binding, options) => {
   let src = el.src; // eslint-disable-line prefer-destructuring
   let title;
   let thumbnails;
+  let closeOnScroll;
   const events = {};
 
   if (options.altAsTitle) title = el.alt;
@@ -21,6 +22,7 @@ const addPluginAttributes = (el, binding, options) => {
   openOn = options.openOn;
   sourceButton = options.sourceButton;
   thumbnails = options.thumbnails;
+  closeOnScroll = options.closeOnScroll;
   /* eslint-enable prefer-destructuring */
 
   // Overriding options if they're provided in binding.value
@@ -44,6 +46,10 @@ const addPluginAttributes = (el, binding, options) => {
     if (binding.value.thumbnails !== undefined) {
       thumbnails = binding.value.thumbnails; // eslint-disable-line prefer-destructuring
     }
+    // same as above
+    if (binding.value.closeOnScroll !== undefined) {
+      closeOnScroll = binding.value.closeOnScroll; // eslint-disable-line prefer-destructuring
+    }
   }
 
   // Setting up data attributes for dynamic properties
@@ -68,6 +74,7 @@ const addPluginAttributes = (el, binding, options) => {
     sourceButton,
     openOn,
     thumbnails,
+    closeOnScroll,
   };
 };
 
@@ -79,6 +86,7 @@ const install = (Vue, options) => {
     sourceButton: false,
     thumbnails: false,
     openOn: 'click',
+    closeOnScroll: true,
   };
 
   // eslint-disable-next-line no-param-reassign
@@ -136,6 +144,7 @@ const install = (Vue, options) => {
         Vue.set(vm, 'currentImageIndex', images.indexOf(el));
         Vue.set(vm, 'handlers', addedAttributes.events);
         Vue.set(vm, 'closed', false);
+        Vue.set(vm, 'closeOnScroll', addedAttributes.closeOnScroll);
       });
     },
   });