detect-scroll-direction
Version:
Detect scroll direction
1 lines • 2.58 kB
JavaScript
"use strict";var _createClass=function(){function t(t,e){for(var i=0;i<e.length;i++){var s=e[i];s.enumerable=s.enumerable||!1,s.configurable=!0,"value"in s&&(s.writable=!0),Object.defineProperty(t,s.key,s)}}return function(e,i,s){return i&&t(e.prototype,i),s&&t(e,s),e}}();function _classCallCheck(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}var ScrollDirection=function(){function t(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};_classCallCheck(this,t);var i=e.target,s=void 0===i?window:i,n=e.addClassesTo,a=void 0===n?"body":n,r=e.minInterval,l=void 0===r?25:r,o=e.tolerance,h=void 0===o?2:o;this.minInterval=l,this.target=s,this.addClassesTo=a?document.querySelector(a):a,this.last=0,this.tolerance=h,this.ready=!0,this.lastHeight=null,this.direction="",this.scrollHandler=this.scrollHandler.bind(this),this.enable=this.enable.bind(this),this.enableTimeout=null,this.watch()}return _createClass(t,[{key:"scrollHandler",value:function(t){this.ready&&(this.ready=!1,this.detectDirection(t),this.enableTimeout=setTimeout(this.enable,this.minInterval))}},{key:"enable",value:function(){this.ready=!0,clearTimeout(this.enableTimeout)}},{key:"watch",value:function(){this.target.addEventListener("touchstart",this.enable),this.target.addEventListener("touchend",this.enable),this.target.addEventListener("touchmove",this.enable),this.target.addEventListener("scroll",this.scrollHandler)}},{key:"stop",value:function(){this.target.removeEventListener("scroll",this.scrollHandler),this.target.removeEventListener("touchstart",this.enable),this.target.removeEventListener("touchend",this.enable),this.target.removeEventListener("touchmove",this.enable)}},{key:"addClasses",value:function(){if(this.addClassesTo&&this.direction){var t=this.addClassesTo,e=this.direction,i="down"==e?"up":"down";t.className=t.className.replace("scroll-direction-"+i,"").replace(/\s\s/gi," ")+" scroll-direction-"+e}}},{key:"onDirectionChange",value:function(){this.addClasses(),this.target.dispatchEvent(new CustomEvent("scrollDirectionChange",{detail:this}))}},{key:"detectDirection",value:function(t){var e=this.target.scrollY||this.target.scrollTop||0,i="up";if(e>0){var s=this.target==window?document.body.clientHeight:this.target.clientHeight,n=0;"number"!=typeof this.lastHeight&&(this.lastHeight=s),this.lastHeight!=s&&(n=s-this.lastHeight),i=this.direction,e-(this.last+n)>this.tolerance?i="down":e-(this.last+n)<-this.tolerance&&(i="up"),this.last=e,this.lastHeight=s}this.direction!=i&&(this.direction=i,this.onDirectionChange())}}]),t}();