prevent body scrolling without overflow hidden

williamtrajano · Jul 17, 2017 · c8513cd · c8513cd
1 parent 8788a31
commit c8513cd
Showing 1 changed file with 41 additions and 1 deletion.
diff --git a/js/modal.js b/js/modal.js
@@ -277,6 +277,45 @@
       }
     }
 
+    _preventDefault(e) {
+      e.preventDefault();
+    }
+
+    _preventWheelDefault(e) {
+      let modalEl = this;
+      let scrolledToBottom = modalEl.offsetHeight + modalEl.scrollTop >= modalEl.scrollHeight;
+      let scrolledToTop = modalEl.scrollTop === 0;
+      if ((scrolledToTop && e.deltaY < 0) || (scrolledToBottom && e.deltaY > 0)) {
+        e.preventDefault();
+      }
+    }
+
+    preventBodyScrolling() {
+      let modalEl = this.$el[0];
+      // modalEl.setAttribute('tabindex', 0);
+      // this.$el[0].focus();
+
+      this.$overlay[0].addEventListener('wheel', this._preventDefault);
+      this.$overlay[0].addEventListener('touchmove', this._preventDefault);
+      modalEl.addEventListener('wheel', this._preventWheelDefault);
+
+      // modalEl.addEventListener("keydown", function(e) {
+      //   let scrolledToBottom = modalEl.offsetHeight + modalEl.scrollTop >= modalEl.scrollHeight;
+      //   let scrolledToTop = modalEl.scrollTop === 0;
+      //   if (e.target === modalEl && [37, 39].indexOf(e.keyCode) > -1 ||
+      //       (e.keyCode === 38 && scrolledToTop) ||
+      //       ([32, 40].indexOf(e.keyCode) > -1 && scrolledToBottom)) {
+      //     e.preventDefault();
+      //   }
+      // });
+    }
+
+    enableBodyScrolling() {
+      this.$overlay[0].removeEventListener('wheel', this._preventDefault);
+      this.$overlay[0].removeEventListener('touchmove', this._preventDefault);
+      this.$el[0].removeEventListener('wheel', this._preventWheelDefault);
+    }
+
     /**
      * Open Modal
      * @param {jQuery} [$trigger]
@@ -288,7 +327,6 @@
 
       this.isOpen = true;
       let body = document.body;
-      body.style.overflow = 'hidden';
       this.$el[0].classList.add('open');
       body.appendChild(this.$overlay[0]);
 
@@ -302,6 +340,7 @@
       }
 
       this.animateIn();
+      this.preventBodyScrolling();
 
       return this;
     }
@@ -323,6 +362,7 @@
       }
 
       this.animateOut();
+      this.enableBodyScrolling();
 
       return this;
     }