diff --git a/src/modules/webslides.js b/src/modules/webslides.js index f2e5a03..4c00aef 100644 --- a/src/modules/webslides.js +++ b/src/modules/webslides.js @@ -185,7 +185,7 @@ export default class WebSlides { } DOM.unlockScroll(); - callback.call(this, nextSlide); + setTimeout(() => { callback.call(this, nextSlide); }, 150); }); } diff --git a/src/plugins/scroll.js b/src/plugins/scroll.js index e69de29..caa6ee2 100644 --- a/src/plugins/scroll.js +++ b/src/plugins/scroll.js @@ -0,0 +1,50 @@ +import ScrollHelper from '../utils/scroll-to'; + +const MIN_WHEEL_DELTA = 40; + +export default class Scroll { + /** + * Scroll handler for the WebSlides. + * @param {WebSlides} wsInstance The WebSlides instance + */ + constructor(wsInstance) { + /** + * @type {WebSlides} + * @private + */ + this.ws_ = wsInstance; + + this.scrollContainer_ = ScrollHelper.getScrollableContainer(); + this.isGoingUp_ = false; + + if (this.ws_.isVertical) { + this.scrollContainer_.addEventListener( + 'wheel', this.onMouseWheel_.bind(this)); + } + } + + /** + * Reacts to the wheel event. Detects whether is going up or down and decides + * if it needs to move the slide based on the amount of delta. + * @param {WheelEvent} event The Wheel Event. + * @private + */ + onMouseWheel_(event) { + if (this.ws_.isMoving) { + return; + } + + const { deltaY: wheelDelta } = event; + this.isGoingUp_ = wheelDelta < 0; + + if (Math.abs(wheelDelta) >= MIN_WHEEL_DELTA) { + if (this.isGoingUp_) { + this.ws_.goPrev(); + } else { + this.ws_.goNext(); + } + + event.preventDefault(); + } + } +}; diff --git a/src/utils/scroll-to.js b/src/utils/scroll-to.js index 7a49d04..edec499 100644 --- a/src/utils/scroll-to.js +++ b/src/utils/scroll-to.js @@ -1,6 +1,6 @@ import Easings from './easing'; -let SCROLLABLE_CONTAINER; +let SCROLLABLE_CONTAINER = getScrollableContainer(); /** * Returns the correct DOM element to be used for scrolling the