add option to block elements from scrolling page when hovered

Author: ashthornton

README.md

@@ -96,14 +96,15 @@ Passed as an object through to the ASScroll constructor. Defaults shown next to
 | `disableRaf`             | `Boolean` | `false`                 | Disable internal requestAnimationFrame loop in order to use an external one                |
 | `disableResize`          | `Boolean` | `false`                 | Disable internal resize event on the window in order to use an external one                |
 | `limitLerpRate`          | `Boolean` | `true`                 | Match lerp speed on >60Hz displays to that of a 60Hz display              |
+| `blockScrollClass`          | `String` | `.asscroll-block`                 | Add this to elements that should prevent the page from scrolling whilst hovered. Useful for scrollable elements (with `overflow`) within the ASScroll page              |
 
 ## Methods
 
 `enable( restore = false, reset = false, newTarget = false, horizontalScroll = false )` - Enable scroll
 
 - `restore` - restores the previous scroll position when `disable()` was last called
 - `reset` - force resetting scroll position to 0
-- `newTarget` - pass in a selected DOM node to set a new scroll target i.e. when loading in a new page via PJAX.
+- `newTarget` - pass in a selected DOM node to set a new scroll target i.e. when dynamically loading in a new page via AJAX.
 - `horizontalScroll` - set to true if you want the content to scroll horizontally
 
 `disable()` - Disable scroll

src/Scroll.js

@@ -185,6 +185,8 @@ export default class Scroll {
             this.scrollTargets = newTargets.length ? newTargets : [newTargets]
             this.scrollTargetsLength = this.scrollTargets.length
         }
+
+        !this.scrollBlockElements && this.updateScrollBlockElements()
 
         this.iframes = this.scrollContainer.querySelectorAll('iframe')
 
@@ -270,6 +272,17 @@ export default class Scroll {
         }
     }
 
+    updateScrollBlockElements() {
+        this.scrollBlockElements = document.querySelectorAll(this.options.blockScrollClass)
+        for (let i = 0; i < this.scrollBlockElements.length; i++) {
+            this.scrollBlockElements[i].addEventListener('wheel', this.blockScrollEvent)
+        }
+    }
+
+    blockScrollEvent(e) {
+        e.stopPropagation()
+    }
+
     toggleFixedContainer() {
         this.scrollContainer.style.position = 'static'
         const scrollPos = this.smoothScrollPos

src/index.js

@@ -18,7 +18,8 @@ export default class ASScroll {
         disableOnTouch = true,
         disableRaf = false,
         disableResize = false,
-        limitLerpRate = true
+        limitLerpRate = true,
+        blockScrollClass = '.asscroll-block'
     } = {} ) {
 
         E.bindAll(this, ['enable', 'disable', 'on', 'scrollTo', 'onRaf', 'onResize'])
@@ -39,7 +40,8 @@ export default class ASScroll {
             scrollbarStyles,
             disableNativeScrollbar,
             disableOnTouch,
-            limitLerpRate
+            limitLerpRate,
+            blockScrollClass
         })
 
     }