diff --git a/README.md b/README.md index f7f5159..e39b4db 100644 --- a/README.md +++ b/README.md @@ -194,13 +194,6 @@ event will be propagated to parent element. **Default**: `false` -### `swipePropagation {Boolean}` - -If this option is true, when the scroll reaches the end of the side, touch -scrolling will be propagated to parent element. - -**Default**: `true` - ### `swipeEasing {Boolean}` If this option is true, swipe scrolling will be eased. diff --git a/dist/perfect-scrollbar.common.js b/dist/perfect-scrollbar.common.js index d137eeb..fe1a942 100644 --- a/dist/perfect-scrollbar.common.js +++ b/dist/perfect-scrollbar.common.js @@ -1,5 +1,5 @@ /*! - * perfect-scrollbar v1.2.0 + * perfect-scrollbar v1.3.0 * (c) 2017 Hyunje Jun * @license MIT */ @@ -27,9 +27,10 @@ function div(className) { } var elMatches = - Element.prototype.matches || - Element.prototype.webkitMatchesSelector || - Element.prototype.msMatchesSelector; + typeof Element !== 'undefined' && + (Element.prototype.matches || + Element.prototype.webkitMatchesSelector || + Element.prototype.msMatchesSelector); function matches(element, query) { if (!elMatches) { @@ -301,12 +302,18 @@ function outerWidth(element) { } var env = { - isWebKit: document && 'WebkitAppearance' in document.documentElement.style, + isWebKit: + typeof document !== 'undefined' && + 'WebkitAppearance' in document.documentElement.style, supportsTouch: - window && + typeof window !== 'undefined' && ('ontouchstart' in window || (window.DocumentTouch && document instanceof window.DocumentTouch)), - supportsIePointer: navigator && navigator.msMaxTouchPoints, + supportsIePointer: + typeof navigator !== 'undefined' && navigator.msMaxTouchPoints, + isChrome: + typeof navigator !== 'undefined' && + /Chrome/i.test(navigator && navigator.userAgent), }; var updateGeometry = function(i) { @@ -709,32 +716,23 @@ var wheel = function(i) { var element = i.element; function shouldPreventDefault(deltaX, deltaY) { - var scrollTop = element.scrollTop; - if (deltaX === 0) { - if (!i.scrollbarYActive) { - return false; - } - if ( - (scrollTop === 0 && deltaY > 0) || - (scrollTop >= i.contentHeight - i.containerHeight && deltaY < 0) - ) { - return !i.settings.wheelPropagation; - } + var isTop = element.scrollTop === 0; + var isBottom = + element.scrollTop + element.offsetHeight === element.scrollHeight; + var isLeft = element.scrollLeft === 0; + var isRight = + element.scrollLeft + element.offsetWidth === element.offsetWidth; + + var hitsBound; + + // pick axis with primary direction + if (Math.abs(deltaY) > Math.abs(deltaX)) { + hitsBound = isTop || isBottom; + } else { + hitsBound = isLeft || isRight; } - var scrollLeft = element.scrollLeft; - if (deltaY === 0) { - if (!i.scrollbarXActive) { - return false; - } - if ( - (scrollLeft === 0 && deltaX < 0) || - (scrollLeft >= i.contentWidth - i.containerWidth && deltaX > 0) - ) { - return !i.settings.wheelPropagation; - } - } - return true; + return hitsBound ? !i.settings.wheelPropagation : true; } function getDeltaFromEvent(e) { @@ -874,7 +872,7 @@ var touch = function(i) { var element = i.element; - function shouldStopOrPrevent(deltaX, deltaY) { + function shouldPrevent(deltaX, deltaY) { var scrollTop = element.scrollTop; var scrollLeft = element.scrollLeft; var magnitudeX = Math.abs(deltaX); @@ -888,10 +886,7 @@ var touch = function(i) { (deltaY > 0 && scrollTop === 0) ) { // set prevent for mobile Chrome refresh - return { - stop: !i.settings.swipePropagation, - prevent: window.scrollY === 0, - }; + return window.scrollY === 0 && deltaY > 0 && env.isChrome; } } else if (magnitudeX > magnitudeY) { // user is perhaps trying to swipe left/right across the page @@ -900,11 +895,11 @@ var touch = function(i) { (deltaX < 0 && scrollLeft === i.contentWidth - i.containerWidth) || (deltaX > 0 && scrollLeft === 0) ) { - return { stop: !i.settings.swipePropagation, prevent: true }; + return true; } } - return { stop: true, prevent: true }; + return true; } function applyTouchMove(differenceX, differenceY) { @@ -918,15 +913,6 @@ var touch = function(i) { var startTime = 0; var speed = {}; var easingLoop = null; - var inGlobalTouch = false; - var inLocalTouch = false; - - function globalTouchStart() { - inGlobalTouch = true; - } - function globalTouchEnd() { - inGlobalTouch = false; - } function getTouch(e) { if (e.targetTouches) { @@ -959,8 +945,6 @@ var touch = function(i) { return; } - inLocalTouch = true; - var touch = getTouch(e); startOffset.pageX = touch.pageX; @@ -971,15 +955,55 @@ var touch = function(i) { if (easingLoop !== null) { clearInterval(easingLoop); } + } - e.stopPropagation(); + function shouldBeConsumedByChild(target, deltaX, deltaY) { + if (!element.contains(target)) { + return false; + } + + var cursor = target; + + while (cursor && cursor !== element) { + if (cursor.classList.contains(cls.element.consuming)) { + return true; + } + + var style = get(cursor); + var overflow = [style.overflow, style.overflowX, style.overflowY].join( + '' + ); + + // if scrollable + if (overflow.match(/(scroll|auto)/)) { + var maxScrollTop = cursor.scrollHeight - cursor.clientHeight; + if (maxScrollTop > 0) { + if ( + !(cursor.scrollTop === 0 && deltaY > 0) && + !(cursor.scrollTop === maxScrollTop && deltaY < 0) + ) { + return true; + } + } + var maxScrollLeft = cursor.scrollLeft - cursor.clientWidth; + if (maxScrollLeft > 0) { + if ( + !(cursor.scrollLeft === 0 && deltaX < 0) && + !(cursor.scrollLeft === maxScrollLeft && deltaX > 0) + ) { + return true; + } + } + } + + cursor = cursor.parentNode; + } + + return false; } function touchMove(e) { - if (!inLocalTouch && i.settings.swipePropagation) { - touchStart(e); - } - if (!inGlobalTouch && inLocalTouch && shouldHandle(e)) { + if (shouldHandle(e)) { var touch = getTouch(e); var currentOffset = { pageX: touch.pageX, pageY: touch.pageY }; @@ -987,6 +1011,10 @@ var touch = function(i) { var differenceX = currentOffset.pageX - startOffset.pageX; var differenceY = currentOffset.pageY - startOffset.pageY; + if (shouldBeConsumedByChild(e.target, differenceX, differenceY)) { + return; + } + applyTouchMove(differenceX, differenceY); startOffset = currentOffset; @@ -999,60 +1027,48 @@ var touch = function(i) { startTime = currentTime; } - var ref = shouldStopOrPrevent(differenceX, differenceY); - var stop = ref.stop; - var prevent = ref.prevent; - if (stop) { e.stopPropagation(); } - if (prevent) { e.preventDefault(); } + if (shouldPrevent(differenceX, differenceY)) { + e.preventDefault(); + } } } function touchEnd() { - if (!inGlobalTouch && inLocalTouch) { - inLocalTouch = false; - - if (i.settings.swipeEasing) { - clearInterval(easingLoop); - easingLoop = setInterval(function() { - if (i.isInitialized) { - clearInterval(easingLoop); - return; - } + if (i.settings.swipeEasing) { + clearInterval(easingLoop); + easingLoop = setInterval(function() { + if (i.isInitialized) { + clearInterval(easingLoop); + return; + } - if (!speed.x && !speed.y) { - clearInterval(easingLoop); - return; - } + if (!speed.x && !speed.y) { + clearInterval(easingLoop); + return; + } - if (Math.abs(speed.x) < 0.01 && Math.abs(speed.y) < 0.01) { - clearInterval(easingLoop); - return; - } + if (Math.abs(speed.x) < 0.01 && Math.abs(speed.y) < 0.01) { + clearInterval(easingLoop); + return; + } - applyTouchMove(speed.x * 30, speed.y * 30); + applyTouchMove(speed.x * 30, speed.y * 30); - speed.x *= 0.8; - speed.y *= 0.8; - }, 10); - } + speed.x *= 0.8; + speed.y *= 0.8; + }, 10); } } if (env.supportsTouch) { - i.event.bind(window, 'touchstart', globalTouchStart); - i.event.bind(window, 'touchend', globalTouchEnd); i.event.bind(element, 'touchstart', touchStart); i.event.bind(element, 'touchmove', touchMove); i.event.bind(element, 'touchend', touchEnd); } else if (env.supportsIePointer) { if (window.PointerEvent) { - i.event.bind(window, 'pointerdown', globalTouchStart); - i.event.bind(window, 'pointerup', globalTouchEnd); i.event.bind(element, 'pointerdown', touchStart); i.event.bind(element, 'pointermove', touchMove); i.event.bind(element, 'pointerup', touchEnd); } else if (window.MSPointerEvent) { - i.event.bind(window, 'MSPointerDown', globalTouchStart); - i.event.bind(window, 'MSPointerUp', globalTouchEnd); i.event.bind(element, 'MSPointerDown', touchStart); i.event.bind(element, 'MSPointerMove', touchMove); i.event.bind(element, 'MSPointerUp', touchEnd); @@ -1069,7 +1085,6 @@ var defaultSettings = function () { return ({ scrollYMarginOffset: 0, suppressScrollX: false, suppressScrollY: false, - swipePropagation: true, swipeEasing: true, useBothWheelAxes: false, wheelPropagation: false, diff --git a/dist/perfect-scrollbar.esm.js b/dist/perfect-scrollbar.esm.js index 8a091c0..31b243e 100644 --- a/dist/perfect-scrollbar.esm.js +++ b/dist/perfect-scrollbar.esm.js @@ -1,5 +1,5 @@ /*! - * perfect-scrollbar v1.2.0 + * perfect-scrollbar v1.3.0 * (c) 2017 Hyunje Jun * @license MIT */ @@ -25,9 +25,10 @@ function div(className) { } var elMatches = - Element.prototype.matches || - Element.prototype.webkitMatchesSelector || - Element.prototype.msMatchesSelector; + typeof Element !== 'undefined' && + (Element.prototype.matches || + Element.prototype.webkitMatchesSelector || + Element.prototype.msMatchesSelector); function matches(element, query) { if (!elMatches) { @@ -299,12 +300,18 @@ function outerWidth(element) { } var env = { - isWebKit: document && 'WebkitAppearance' in document.documentElement.style, + isWebKit: + typeof document !== 'undefined' && + 'WebkitAppearance' in document.documentElement.style, supportsTouch: - window && + typeof window !== 'undefined' && ('ontouchstart' in window || (window.DocumentTouch && document instanceof window.DocumentTouch)), - supportsIePointer: navigator && navigator.msMaxTouchPoints, + supportsIePointer: + typeof navigator !== 'undefined' && navigator.msMaxTouchPoints, + isChrome: + typeof navigator !== 'undefined' && + /Chrome/i.test(navigator && navigator.userAgent), }; var updateGeometry = function(i) { @@ -707,32 +714,23 @@ var wheel = function(i) { var element = i.element; function shouldPreventDefault(deltaX, deltaY) { - var scrollTop = element.scrollTop; - if (deltaX === 0) { - if (!i.scrollbarYActive) { - return false; - } - if ( - (scrollTop === 0 && deltaY > 0) || - (scrollTop >= i.contentHeight - i.containerHeight && deltaY < 0) - ) { - return !i.settings.wheelPropagation; - } + var isTop = element.scrollTop === 0; + var isBottom = + element.scrollTop + element.offsetHeight === element.scrollHeight; + var isLeft = element.scrollLeft === 0; + var isRight = + element.scrollLeft + element.offsetWidth === element.offsetWidth; + + var hitsBound; + + // pick axis with primary direction + if (Math.abs(deltaY) > Math.abs(deltaX)) { + hitsBound = isTop || isBottom; + } else { + hitsBound = isLeft || isRight; } - var scrollLeft = element.scrollLeft; - if (deltaY === 0) { - if (!i.scrollbarXActive) { - return false; - } - if ( - (scrollLeft === 0 && deltaX < 0) || - (scrollLeft >= i.contentWidth - i.containerWidth && deltaX > 0) - ) { - return !i.settings.wheelPropagation; - } - } - return true; + return hitsBound ? !i.settings.wheelPropagation : true; } function getDeltaFromEvent(e) { @@ -872,7 +870,7 @@ var touch = function(i) { var element = i.element; - function shouldStopOrPrevent(deltaX, deltaY) { + function shouldPrevent(deltaX, deltaY) { var scrollTop = element.scrollTop; var scrollLeft = element.scrollLeft; var magnitudeX = Math.abs(deltaX); @@ -886,10 +884,7 @@ var touch = function(i) { (deltaY > 0 && scrollTop === 0) ) { // set prevent for mobile Chrome refresh - return { - stop: !i.settings.swipePropagation, - prevent: window.scrollY === 0, - }; + return window.scrollY === 0 && deltaY > 0 && env.isChrome; } } else if (magnitudeX > magnitudeY) { // user is perhaps trying to swipe left/right across the page @@ -898,11 +893,11 @@ var touch = function(i) { (deltaX < 0 && scrollLeft === i.contentWidth - i.containerWidth) || (deltaX > 0 && scrollLeft === 0) ) { - return { stop: !i.settings.swipePropagation, prevent: true }; + return true; } } - return { stop: true, prevent: true }; + return true; } function applyTouchMove(differenceX, differenceY) { @@ -916,15 +911,6 @@ var touch = function(i) { var startTime = 0; var speed = {}; var easingLoop = null; - var inGlobalTouch = false; - var inLocalTouch = false; - - function globalTouchStart() { - inGlobalTouch = true; - } - function globalTouchEnd() { - inGlobalTouch = false; - } function getTouch(e) { if (e.targetTouches) { @@ -957,8 +943,6 @@ var touch = function(i) { return; } - inLocalTouch = true; - var touch = getTouch(e); startOffset.pageX = touch.pageX; @@ -969,15 +953,55 @@ var touch = function(i) { if (easingLoop !== null) { clearInterval(easingLoop); } + } - e.stopPropagation(); + function shouldBeConsumedByChild(target, deltaX, deltaY) { + if (!element.contains(target)) { + return false; + } + + var cursor = target; + + while (cursor && cursor !== element) { + if (cursor.classList.contains(cls.element.consuming)) { + return true; + } + + var style = get(cursor); + var overflow = [style.overflow, style.overflowX, style.overflowY].join( + '' + ); + + // if scrollable + if (overflow.match(/(scroll|auto)/)) { + var maxScrollTop = cursor.scrollHeight - cursor.clientHeight; + if (maxScrollTop > 0) { + if ( + !(cursor.scrollTop === 0 && deltaY > 0) && + !(cursor.scrollTop === maxScrollTop && deltaY < 0) + ) { + return true; + } + } + var maxScrollLeft = cursor.scrollLeft - cursor.clientWidth; + if (maxScrollLeft > 0) { + if ( + !(cursor.scrollLeft === 0 && deltaX < 0) && + !(cursor.scrollLeft === maxScrollLeft && deltaX > 0) + ) { + return true; + } + } + } + + cursor = cursor.parentNode; + } + + return false; } function touchMove(e) { - if (!inLocalTouch && i.settings.swipePropagation) { - touchStart(e); - } - if (!inGlobalTouch && inLocalTouch && shouldHandle(e)) { + if (shouldHandle(e)) { var touch = getTouch(e); var currentOffset = { pageX: touch.pageX, pageY: touch.pageY }; @@ -985,6 +1009,10 @@ var touch = function(i) { var differenceX = currentOffset.pageX - startOffset.pageX; var differenceY = currentOffset.pageY - startOffset.pageY; + if (shouldBeConsumedByChild(e.target, differenceX, differenceY)) { + return; + } + applyTouchMove(differenceX, differenceY); startOffset = currentOffset; @@ -997,60 +1025,48 @@ var touch = function(i) { startTime = currentTime; } - var ref = shouldStopOrPrevent(differenceX, differenceY); - var stop = ref.stop; - var prevent = ref.prevent; - if (stop) { e.stopPropagation(); } - if (prevent) { e.preventDefault(); } + if (shouldPrevent(differenceX, differenceY)) { + e.preventDefault(); + } } } function touchEnd() { - if (!inGlobalTouch && inLocalTouch) { - inLocalTouch = false; - - if (i.settings.swipeEasing) { - clearInterval(easingLoop); - easingLoop = setInterval(function() { - if (i.isInitialized) { - clearInterval(easingLoop); - return; - } + if (i.settings.swipeEasing) { + clearInterval(easingLoop); + easingLoop = setInterval(function() { + if (i.isInitialized) { + clearInterval(easingLoop); + return; + } - if (!speed.x && !speed.y) { - clearInterval(easingLoop); - return; - } + if (!speed.x && !speed.y) { + clearInterval(easingLoop); + return; + } - if (Math.abs(speed.x) < 0.01 && Math.abs(speed.y) < 0.01) { - clearInterval(easingLoop); - return; - } + if (Math.abs(speed.x) < 0.01 && Math.abs(speed.y) < 0.01) { + clearInterval(easingLoop); + return; + } - applyTouchMove(speed.x * 30, speed.y * 30); + applyTouchMove(speed.x * 30, speed.y * 30); - speed.x *= 0.8; - speed.y *= 0.8; - }, 10); - } + speed.x *= 0.8; + speed.y *= 0.8; + }, 10); } } if (env.supportsTouch) { - i.event.bind(window, 'touchstart', globalTouchStart); - i.event.bind(window, 'touchend', globalTouchEnd); i.event.bind(element, 'touchstart', touchStart); i.event.bind(element, 'touchmove', touchMove); i.event.bind(element, 'touchend', touchEnd); } else if (env.supportsIePointer) { if (window.PointerEvent) { - i.event.bind(window, 'pointerdown', globalTouchStart); - i.event.bind(window, 'pointerup', globalTouchEnd); i.event.bind(element, 'pointerdown', touchStart); i.event.bind(element, 'pointermove', touchMove); i.event.bind(element, 'pointerup', touchEnd); } else if (window.MSPointerEvent) { - i.event.bind(window, 'MSPointerDown', globalTouchStart); - i.event.bind(window, 'MSPointerUp', globalTouchEnd); i.event.bind(element, 'MSPointerDown', touchStart); i.event.bind(element, 'MSPointerMove', touchMove); i.event.bind(element, 'MSPointerUp', touchEnd); @@ -1067,7 +1083,6 @@ var defaultSettings = function () { return ({ scrollYMarginOffset: 0, suppressScrollX: false, suppressScrollY: false, - swipePropagation: true, swipeEasing: true, useBothWheelAxes: false, wheelPropagation: false, diff --git a/dist/perfect-scrollbar.js b/dist/perfect-scrollbar.js index 5e4ef5f..382967a 100644 --- a/dist/perfect-scrollbar.js +++ b/dist/perfect-scrollbar.js @@ -1,5 +1,5 @@ /*! - * perfect-scrollbar v1.2.0 + * perfect-scrollbar v1.3.0 * (c) 2017 Hyunje Jun * @license MIT */ @@ -31,9 +31,10 @@ function div(className) { } var elMatches = - Element.prototype.matches || - Element.prototype.webkitMatchesSelector || - Element.prototype.msMatchesSelector; + typeof Element !== 'undefined' && + (Element.prototype.matches || + Element.prototype.webkitMatchesSelector || + Element.prototype.msMatchesSelector); function matches(element, query) { if (!elMatches) { @@ -305,12 +306,18 @@ function outerWidth(element) { } var env = { - isWebKit: document && 'WebkitAppearance' in document.documentElement.style, + isWebKit: + typeof document !== 'undefined' && + 'WebkitAppearance' in document.documentElement.style, supportsTouch: - window && + typeof window !== 'undefined' && ('ontouchstart' in window || (window.DocumentTouch && document instanceof window.DocumentTouch)), - supportsIePointer: navigator && navigator.msMaxTouchPoints, + supportsIePointer: + typeof navigator !== 'undefined' && navigator.msMaxTouchPoints, + isChrome: + typeof navigator !== 'undefined' && + /Chrome/i.test(navigator && navigator.userAgent), }; var updateGeometry = function(i) { @@ -713,32 +720,23 @@ var wheel = function(i) { var element = i.element; function shouldPreventDefault(deltaX, deltaY) { - var scrollTop = element.scrollTop; - if (deltaX === 0) { - if (!i.scrollbarYActive) { - return false; - } - if ( - (scrollTop === 0 && deltaY > 0) || - (scrollTop >= i.contentHeight - i.containerHeight && deltaY < 0) - ) { - return !i.settings.wheelPropagation; - } + var isTop = element.scrollTop === 0; + var isBottom = + element.scrollTop + element.offsetHeight === element.scrollHeight; + var isLeft = element.scrollLeft === 0; + var isRight = + element.scrollLeft + element.offsetWidth === element.offsetWidth; + + var hitsBound; + + // pick axis with primary direction + if (Math.abs(deltaY) > Math.abs(deltaX)) { + hitsBound = isTop || isBottom; + } else { + hitsBound = isLeft || isRight; } - var scrollLeft = element.scrollLeft; - if (deltaY === 0) { - if (!i.scrollbarXActive) { - return false; - } - if ( - (scrollLeft === 0 && deltaX < 0) || - (scrollLeft >= i.contentWidth - i.containerWidth && deltaX > 0) - ) { - return !i.settings.wheelPropagation; - } - } - return true; + return hitsBound ? !i.settings.wheelPropagation : true; } function getDeltaFromEvent(e) { @@ -878,7 +876,7 @@ var touch = function(i) { var element = i.element; - function shouldStopOrPrevent(deltaX, deltaY) { + function shouldPrevent(deltaX, deltaY) { var scrollTop = element.scrollTop; var scrollLeft = element.scrollLeft; var magnitudeX = Math.abs(deltaX); @@ -892,10 +890,7 @@ var touch = function(i) { (deltaY > 0 && scrollTop === 0) ) { // set prevent for mobile Chrome refresh - return { - stop: !i.settings.swipePropagation, - prevent: window.scrollY === 0, - }; + return window.scrollY === 0 && deltaY > 0 && env.isChrome; } } else if (magnitudeX > magnitudeY) { // user is perhaps trying to swipe left/right across the page @@ -904,11 +899,11 @@ var touch = function(i) { (deltaX < 0 && scrollLeft === i.contentWidth - i.containerWidth) || (deltaX > 0 && scrollLeft === 0) ) { - return { stop: !i.settings.swipePropagation, prevent: true }; + return true; } } - return { stop: true, prevent: true }; + return true; } function applyTouchMove(differenceX, differenceY) { @@ -922,15 +917,6 @@ var touch = function(i) { var startTime = 0; var speed = {}; var easingLoop = null; - var inGlobalTouch = false; - var inLocalTouch = false; - - function globalTouchStart() { - inGlobalTouch = true; - } - function globalTouchEnd() { - inGlobalTouch = false; - } function getTouch(e) { if (e.targetTouches) { @@ -963,8 +949,6 @@ var touch = function(i) { return; } - inLocalTouch = true; - var touch = getTouch(e); startOffset.pageX = touch.pageX; @@ -975,15 +959,55 @@ var touch = function(i) { if (easingLoop !== null) { clearInterval(easingLoop); } + } - e.stopPropagation(); + function shouldBeConsumedByChild(target, deltaX, deltaY) { + if (!element.contains(target)) { + return false; + } + + var cursor = target; + + while (cursor && cursor !== element) { + if (cursor.classList.contains(cls.element.consuming)) { + return true; + } + + var style = get(cursor); + var overflow = [style.overflow, style.overflowX, style.overflowY].join( + '' + ); + + // if scrollable + if (overflow.match(/(scroll|auto)/)) { + var maxScrollTop = cursor.scrollHeight - cursor.clientHeight; + if (maxScrollTop > 0) { + if ( + !(cursor.scrollTop === 0 && deltaY > 0) && + !(cursor.scrollTop === maxScrollTop && deltaY < 0) + ) { + return true; + } + } + var maxScrollLeft = cursor.scrollLeft - cursor.clientWidth; + if (maxScrollLeft > 0) { + if ( + !(cursor.scrollLeft === 0 && deltaX < 0) && + !(cursor.scrollLeft === maxScrollLeft && deltaX > 0) + ) { + return true; + } + } + } + + cursor = cursor.parentNode; + } + + return false; } function touchMove(e) { - if (!inLocalTouch && i.settings.swipePropagation) { - touchStart(e); - } - if (!inGlobalTouch && inLocalTouch && shouldHandle(e)) { + if (shouldHandle(e)) { var touch = getTouch(e); var currentOffset = { pageX: touch.pageX, pageY: touch.pageY }; @@ -991,6 +1015,10 @@ var touch = function(i) { var differenceX = currentOffset.pageX - startOffset.pageX; var differenceY = currentOffset.pageY - startOffset.pageY; + if (shouldBeConsumedByChild(e.target, differenceX, differenceY)) { + return; + } + applyTouchMove(differenceX, differenceY); startOffset = currentOffset; @@ -1003,60 +1031,48 @@ var touch = function(i) { startTime = currentTime; } - var ref = shouldStopOrPrevent(differenceX, differenceY); - var stop = ref.stop; - var prevent = ref.prevent; - if (stop) { e.stopPropagation(); } - if (prevent) { e.preventDefault(); } + if (shouldPrevent(differenceX, differenceY)) { + e.preventDefault(); + } } } function touchEnd() { - if (!inGlobalTouch && inLocalTouch) { - inLocalTouch = false; - - if (i.settings.swipeEasing) { - clearInterval(easingLoop); - easingLoop = setInterval(function() { - if (i.isInitialized) { - clearInterval(easingLoop); - return; - } + if (i.settings.swipeEasing) { + clearInterval(easingLoop); + easingLoop = setInterval(function() { + if (i.isInitialized) { + clearInterval(easingLoop); + return; + } - if (!speed.x && !speed.y) { - clearInterval(easingLoop); - return; - } + if (!speed.x && !speed.y) { + clearInterval(easingLoop); + return; + } - if (Math.abs(speed.x) < 0.01 && Math.abs(speed.y) < 0.01) { - clearInterval(easingLoop); - return; - } + if (Math.abs(speed.x) < 0.01 && Math.abs(speed.y) < 0.01) { + clearInterval(easingLoop); + return; + } - applyTouchMove(speed.x * 30, speed.y * 30); + applyTouchMove(speed.x * 30, speed.y * 30); - speed.x *= 0.8; - speed.y *= 0.8; - }, 10); - } + speed.x *= 0.8; + speed.y *= 0.8; + }, 10); } } if (env.supportsTouch) { - i.event.bind(window, 'touchstart', globalTouchStart); - i.event.bind(window, 'touchend', globalTouchEnd); i.event.bind(element, 'touchstart', touchStart); i.event.bind(element, 'touchmove', touchMove); i.event.bind(element, 'touchend', touchEnd); } else if (env.supportsIePointer) { if (window.PointerEvent) { - i.event.bind(window, 'pointerdown', globalTouchStart); - i.event.bind(window, 'pointerup', globalTouchEnd); i.event.bind(element, 'pointerdown', touchStart); i.event.bind(element, 'pointermove', touchMove); i.event.bind(element, 'pointerup', touchEnd); } else if (window.MSPointerEvent) { - i.event.bind(window, 'MSPointerDown', globalTouchStart); - i.event.bind(window, 'MSPointerUp', globalTouchEnd); i.event.bind(element, 'MSPointerDown', touchStart); i.event.bind(element, 'MSPointerMove', touchMove); i.event.bind(element, 'MSPointerUp', touchEnd); @@ -1073,7 +1089,6 @@ var defaultSettings = function () { return ({ scrollYMarginOffset: 0, suppressScrollX: false, suppressScrollY: false, - swipePropagation: true, swipeEasing: true, useBothWheelAxes: false, wheelPropagation: false, diff --git a/dist/perfect-scrollbar.min.js b/dist/perfect-scrollbar.min.js index b5d61d2..dfa8188 100644 --- a/dist/perfect-scrollbar.min.js +++ b/dist/perfect-scrollbar.min.js @@ -1,6 +1,6 @@ /*! - * perfect-scrollbar v1.2.0 + * perfect-scrollbar v1.3.0 * (c) 2017 Hyunje Jun * @license MIT */ -!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):t.PerfectScrollbar=e()}(this,function(){"use strict";function t(t){return getComputedStyle(t)}function e(t,e){for(var i in e){var n=e[i];"number"==typeof n&&(n+="px"),t.style[i]=n}return t}function i(t){var e=document.createElement("div");return e.className=t,e}function n(t,e){if(!v)throw new Error("No element matching method supported");return v.call(t,e)}function r(t){t.remove?t.remove():t.parentNode&&t.parentNode.removeChild(t)}function l(t,e){return Array.prototype.filter.call(t.children,function(t){return n(t,e)})}function o(t,e){var i=t.element.classList,n=m.state.scrolling(e);i.contains(n)?clearTimeout(w[e]):i.add(n)}function s(t,e){w[e]=setTimeout(function(){return t.isAlive&&t.element.classList.remove(m.state.scrolling(e))},t.settings.scrollingThreshold)}function a(t,e){o(t,e),s(t,e)}function c(t){if("function"==typeof window.CustomEvent)return new CustomEvent(t);var e=document.createEvent("CustomEvent");return e.initCustomEvent(t,!1,!1,void 0),e}function h(t,e,i,n,r){var l=i[0],o=i[1],s=i[2],h=i[3],u=i[4],d=i[5];void 0===n&&(n=!0),void 0===r&&(r=!1);var p=t.element;t.reach[h]=null,p[s]<1&&(t.reach[h]="start"),p[s]>t[l]-t[o]-1&&(t.reach[h]="end"),e&&(p.dispatchEvent(c("ps-scroll-"+h)),e<0?p.dispatchEvent(c("ps-scroll-"+u)):e>0&&p.dispatchEvent(c("ps-scroll-"+d)),n&&a(t,h)),t.reach[h]&&(e||r)&&p.dispatchEvent(c("ps-"+h+"-reach-"+t.reach[h]))}function u(t){return parseInt(t,10)||0}function d(t){return n(t,"input,[contenteditable]")||n(t,"select,[contenteditable]")||n(t,"textarea,[contenteditable]")||n(t,"button,[contenteditable]")}function p(e){var i=t(e);return u(i.width)+u(i.paddingLeft)+u(i.paddingRight)+u(i.borderLeftWidth)+u(i.borderRightWidth)}function f(t,e){return t.settings.minScrollbarLength&&(e=Math.max(e,t.settings.minScrollbarLength)),t.settings.maxScrollbarLength&&(e=Math.min(e,t.settings.maxScrollbarLength)),e}function b(t,i){var n={width:i.railXWidth};i.isRtl?n.left=i.negativeScrollAdjustment+t.scrollLeft+i.containerWidth-i.contentWidth:n.left=t.scrollLeft,i.isScrollbarXUsingBottom?n.bottom=i.scrollbarXBottom-t.scrollTop:n.top=i.scrollbarXTop+t.scrollTop,e(i.scrollbarXRail,n);var r={top:t.scrollTop,height:i.railYHeight};i.isScrollbarYUsingRight?i.isRtl?r.right=i.contentWidth-(i.negativeScrollAdjustment+t.scrollLeft)-i.scrollbarYRight-i.scrollbarYOuterWidth:r.right=i.scrollbarYRight-t.scrollLeft:i.isRtl?r.left=i.negativeScrollAdjustment+t.scrollLeft+2*i.containerWidth-i.contentWidth-i.scrollbarYLeft-i.scrollbarYOuterWidth:r.left=i.scrollbarYLeft+t.scrollLeft,e(i.scrollbarYRail,r),e(i.scrollbarX,{left:i.scrollbarXLeft,width:i.scrollbarXWidth-i.railBorderXWidth}),e(i.scrollbarY,{top:i.scrollbarYTop,height:i.scrollbarYHeight-i.railBorderYWidth})}function g(t,e){function i(e){f[d]=b+v*(e[a]-g),o(t,p),R(t),e.stopPropagation(),e.preventDefault()}function n(){s(t,p),t.event.unbind(t.ownerDocument,"mousemove",i)}var r=e[0],l=e[1],a=e[2],c=e[3],h=e[4],u=e[5],d=e[6],p=e[7],f=t.element,b=null,g=null,v=null;t.event.bind(t[h],"mousedown",function(e){b=f[d],g=e[a],v=(t[l]-t[r])/(t[c]-t[u]),t.event.bind(t.ownerDocument,"mousemove",i),t.event.once(t.ownerDocument,"mouseup",n),e.stopPropagation(),e.preventDefault()})}var v=Element.prototype.matches||Element.prototype.webkitMatchesSelector||Element.prototype.msMatchesSelector,m={main:"ps",element:{thumb:function(t){return"ps__thumb-"+t},rail:function(t){return"ps__rail-"+t},consuming:"ps__child--consume"},state:{focus:"ps--focus",active:function(t){return"ps--active-"+t},scrolling:function(t){return"ps--scrolling-"+t}}},w={x:null,y:null},Y=function(t){this.element=t,this.handlers={}},X={isEmpty:{configurable:!0}};Y.prototype.bind=function(t,e){void 0===this.handlers[t]&&(this.handlers[t]=[]),this.handlers[t].push(e),this.element.addEventListener(t,e,!1)},Y.prototype.unbind=function(t,e){var i=this;this.handlers[t]=this.handlers[t].filter(function(n){return!(!e||n===e)||(i.element.removeEventListener(t,n,!1),!1)})},Y.prototype.unbindAll=function(){var t=this;for(var e in t.handlers)t.unbind(e)},X.isEmpty.get=function(){var t=this;return Object.keys(this.handlers).every(function(e){return 0===t.handlers[e].length})},Object.defineProperties(Y.prototype,X);var W=function(){this.eventElements=[]};W.prototype.eventElement=function(t){var e=this.eventElements.filter(function(e){return e.element===t})[0];return e||(e=new Y(t),this.eventElements.push(e)),e},W.prototype.bind=function(t,e,i){this.eventElement(t).bind(e,i)},W.prototype.unbind=function(t,e,i){var n=this.eventElement(t);n.unbind(e,i),n.isEmpty&&this.eventElements.splice(this.eventElements.indexOf(n),1)},W.prototype.unbindAll=function(){this.eventElements.forEach(function(t){return t.unbindAll()}),this.eventElements=[]},W.prototype.once=function(t,e,i){var n=this.eventElement(t),r=function(t){n.unbind(e,r),i(t)};n.bind(e,r)};var y=function(t,e,i,n,r){void 0===n&&(n=!0),void 0===r&&(r=!1);var l;if("top"===e)l=["contentHeight","containerHeight","scrollTop","y","up","down"];else{if("left"!==e)throw new Error("A proper axis should be provided");l=["contentWidth","containerWidth","scrollLeft","x","left","right"]}h(t,i,l,n,r)},L={isWebKit:document&&"WebkitAppearance"in document.documentElement.style,supportsTouch:window&&("ontouchstart"in window||window.DocumentTouch&&document instanceof window.DocumentTouch),supportsIePointer:navigator&&navigator.msMaxTouchPoints},R=function(t){var e=t.element;t.containerWidth=e.clientWidth,t.containerHeight=e.clientHeight,t.contentWidth=e.scrollWidth,t.contentHeight=e.scrollHeight,e.contains(t.scrollbarXRail)||(l(e,m.element.rail("x")).forEach(function(t){return r(t)}),e.appendChild(t.scrollbarXRail)),e.contains(t.scrollbarYRail)||(l(e,m.element.rail("y")).forEach(function(t){return r(t)}),e.appendChild(t.scrollbarYRail)),!t.settings.suppressScrollX&&t.containerWidth+t.settings.scrollXMarginOffset=t.railXWidth-t.scrollbarXWidth&&(t.scrollbarXLeft=t.railXWidth-t.scrollbarXWidth),t.scrollbarYTop>=t.railYHeight-t.scrollbarYHeight&&(t.scrollbarYTop=t.railYHeight-t.scrollbarYHeight),b(e,t),t.scrollbarXActive?e.classList.add(m.state.active("x")):(e.classList.remove(m.state.active("x")),t.scrollbarXWidth=0,t.scrollbarXLeft=0,e.scrollLeft=0),t.scrollbarYActive?e.classList.add(m.state.active("y")):(e.classList.remove(m.state.active("y")),t.scrollbarYHeight=0,t.scrollbarYTop=0,e.scrollTop=0)},T={"click-rail":function(t){t.event.bind(t.scrollbarY,"mousedown",function(t){return t.stopPropagation()}),t.event.bind(t.scrollbarYRail,"mousedown",function(e){var i=e.pageY-window.pageYOffset-t.scrollbarYRail.getBoundingClientRect().top>t.scrollbarYTop?1:-1;t.element.scrollTop+=i*t.containerHeight,R(t),e.stopPropagation()}),t.event.bind(t.scrollbarX,"mousedown",function(t){return t.stopPropagation()}),t.event.bind(t.scrollbarXRail,"mousedown",function(e){var i=e.pageX-window.pageXOffset-t.scrollbarXRail.getBoundingClientRect().left>t.scrollbarXLeft?1:-1;t.element.scrollLeft+=i*t.containerWidth,R(t),e.stopPropagation()})},"drag-thumb":function(t){g(t,["containerWidth","contentWidth","pageX","railXWidth","scrollbarX","scrollbarXWidth","scrollLeft","x"]),g(t,["containerHeight","contentHeight","pageY","railYHeight","scrollbarY","scrollbarYHeight","scrollTop","y"])},keyboard:function(t){function e(e,n){var r=i.scrollTop;if(0===e){if(!t.scrollbarYActive)return!1;if(0===r&&n>0||r>=t.contentHeight-t.containerHeight&&n<0)return!t.settings.wheelPropagation}var l=i.scrollLeft;if(0===n){if(!t.scrollbarXActive)return!1;if(0===l&&e<0||l>=t.contentWidth-t.containerWidth&&e>0)return!t.settings.wheelPropagation}return!0}var i=t.element,r=function(){return n(i,":hover")},l=function(){return n(t.scrollbarX,":focus")||n(t.scrollbarY,":focus")};t.event.bind(t.ownerDocument,"keydown",function(n){if(!(n.isDefaultPrevented&&n.isDefaultPrevented()||n.defaultPrevented)&&(r()||l())){var o=document.activeElement?document.activeElement:t.ownerDocument.activeElement;if(o){if("IFRAME"===o.tagName)o=o.contentDocument.activeElement;else for(;o.shadowRoot;)o=o.shadowRoot.activeElement;if(d(o))return}var s=0,a=0;switch(n.which){case 37:s=n.metaKey?-t.contentWidth:n.altKey?-t.containerWidth:-30;break;case 38:a=n.metaKey?t.contentHeight:n.altKey?t.containerHeight:30;break;case 39:s=n.metaKey?t.contentWidth:n.altKey?t.containerWidth:30;break;case 40:a=n.metaKey?-t.contentHeight:n.altKey?-t.containerHeight:-30;break;case 32:a=n.shiftKey?t.containerHeight:-t.containerHeight;break;case 33:a=t.containerHeight;break;case 34:a=-t.containerHeight;break;case 36:a=t.contentHeight;break;case 35:a=-t.contentHeight;break;default:return}t.settings.suppressScrollX&&0!==s||t.settings.suppressScrollY&&0!==a||(i.scrollTop-=a,i.scrollLeft+=s,R(t),e(s,a)&&n.preventDefault())}})},wheel:function(e){function i(t,i){var n=o.scrollTop;if(0===t){if(!e.scrollbarYActive)return!1;if(0===n&&i>0||n>=e.contentHeight-e.containerHeight&&i<0)return!e.settings.wheelPropagation}var r=o.scrollLeft;if(0===i){if(!e.scrollbarXActive)return!1;if(0===r&&t<0||r>=e.contentWidth-e.containerWidth&&t>0)return!e.settings.wheelPropagation}return!0}function n(t){var e=t.deltaX,i=-1*t.deltaY;return void 0!==e&&void 0!==i||(e=-1*t.wheelDeltaX/6,i=t.wheelDeltaY/6),t.deltaMode&&1===t.deltaMode&&(e*=10,i*=10),e!==e&&i!==i&&(e=0,i=t.wheelDelta),t.shiftKey?[-i,-e]:[e,i]}function r(e,i,n){if(!L.isWebKit&&o.querySelector("select:focus"))return!0;if(!o.contains(e))return!1;for(var r=e;r&&r!==o;){if(r.classList.contains(m.element.consuming))return!0;var l=t(r);if([l.overflow,l.overflowX,l.overflowY].join("").match(/(scroll|auto)/)){var s=r.scrollHeight-r.clientHeight;if(s>0&&!(0===r.scrollTop&&n>0||r.scrollTop===s&&n<0))return!0;var a=r.scrollLeft-r.clientWidth;if(a>0&&!(0===r.scrollLeft&&i<0||r.scrollLeft===a&&i>0))return!0}r=r.parentNode}return!1}function l(t){var l=n(t),s=l[0],a=l[1];if(!r(t.target,s,a)){var c=!1;e.settings.useBothWheelAxes?e.scrollbarYActive&&!e.scrollbarXActive?(a?o.scrollTop-=a*e.settings.wheelSpeed:o.scrollTop+=s*e.settings.wheelSpeed,c=!0):e.scrollbarXActive&&!e.scrollbarYActive&&(s?o.scrollLeft+=s*e.settings.wheelSpeed:o.scrollLeft-=a*e.settings.wheelSpeed,c=!0):(o.scrollTop-=a*e.settings.wheelSpeed,o.scrollLeft+=s*e.settings.wheelSpeed),R(e),(c=c||i(s,a))&&!t.ctrlKey&&(t.stopPropagation(),t.preventDefault())}}var o=e.element;void 0!==window.onwheel?e.event.bind(o,"wheel",l):void 0!==window.onmousewheel&&e.event.bind(o,"mousewheel",l)},touch:function(t){function e(e,i){var n=h.scrollTop,r=h.scrollLeft,l=Math.abs(e),o=Math.abs(i);if(o>l){if(i<0&&n===t.contentHeight-t.containerHeight||i>0&&0===n)return{stop:!t.settings.swipePropagation,prevent:0===window.scrollY}}else if(l>o&&(e<0&&r===t.contentWidth-t.containerWidth||e>0&&0===r))return{stop:!t.settings.swipePropagation,prevent:!0};return{stop:!0,prevent:!0}}function i(e,i){h.scrollTop-=i,h.scrollLeft-=e,R(t)}function n(){b=!0}function r(){b=!1}function l(t){return t.targetTouches?t.targetTouches[0]:t}function o(t){return!(t.pointerType&&"pen"===t.pointerType&&0===t.buttons||(!t.targetTouches||1!==t.targetTouches.length)&&(!t.pointerType||"mouse"===t.pointerType||t.pointerType===t.MSPOINTER_TYPE_MOUSE))}function s(t){if(o(t)){g=!0;var e=l(t);u.pageX=e.pageX,u.pageY=e.pageY,d=(new Date).getTime(),null!==f&&clearInterval(f),t.stopPropagation()}}function a(n){if(!g&&t.settings.swipePropagation&&s(n),!b&&g&&o(n)){var r=l(n),a={pageX:r.pageX,pageY:r.pageY},c=a.pageX-u.pageX,h=a.pageY-u.pageY;i(c,h),u=a;var f=(new Date).getTime(),v=f-d;v>0&&(p.x=c/v,p.y=h/v,d=f);var m=e(c,h),w=m.stop,Y=m.prevent;w&&n.stopPropagation(),Y&&n.preventDefault()}}function c(){!b&&g&&(g=!1,t.settings.swipeEasing&&(clearInterval(f),f=setInterval(function(){t.isInitialized?clearInterval(f):p.x||p.y?Math.abs(p.x)<.01&&Math.abs(p.y)<.01?clearInterval(f):(i(30*p.x,30*p.y),p.x*=.8,p.y*=.8):clearInterval(f)},10)))}if(L.supportsTouch||L.supportsIePointer){var h=t.element,u={},d=0,p={},f=null,b=!1,g=!1;L.supportsTouch?(t.event.bind(window,"touchstart",n),t.event.bind(window,"touchend",r),t.event.bind(h,"touchstart",s),t.event.bind(h,"touchmove",a),t.event.bind(h,"touchend",c)):L.supportsIePointer&&(window.PointerEvent?(t.event.bind(window,"pointerdown",n),t.event.bind(window,"pointerup",r),t.event.bind(h,"pointerdown",s),t.event.bind(h,"pointermove",a),t.event.bind(h,"pointerup",c)):window.MSPointerEvent&&(t.event.bind(window,"MSPointerDown",n),t.event.bind(window,"MSPointerUp",r),t.event.bind(h,"MSPointerDown",s),t.event.bind(h,"MSPointerMove",a),t.event.bind(h,"MSPointerUp",c)))}}},H=function(n,r){var l=this;if(void 0===r&&(r={}),"string"==typeof n&&(n=document.querySelector(n)),!n||!n.nodeName)throw new Error("no element is specified to initialize PerfectScrollbar");this.element=n,n.classList.add(m.main),this.settings={handlers:["click-rail","drag-thumb","keyboard","wheel","touch"],maxScrollbarLength:null,minScrollbarLength:null,scrollingThreshold:1e3,scrollXMarginOffset:0,scrollYMarginOffset:0,suppressScrollX:!1,suppressScrollY:!1,swipePropagation:!0,swipeEasing:!0,useBothWheelAxes:!1,wheelPropagation:!1,wheelSpeed:1};for(var o in r)l.settings[o]=r[o];this.containerWidth=null,this.containerHeight=null,this.contentWidth=null,this.contentHeight=null;var s=function(){return n.classList.add(m.state.focus)},a=function(){return n.classList.remove(m.state.focus)};this.isRtl="rtl"===t(n).direction,this.isNegativeScroll=function(){var t=n.scrollLeft,e=null;return n.scrollLeft=-1,e=n.scrollLeft<0,n.scrollLeft=t,e}(),this.negativeScrollAdjustment=this.isNegativeScroll?n.scrollWidth-n.clientWidth:0,this.event=new W,this.ownerDocument=n.ownerDocument||document,this.scrollbarXRail=i(m.element.rail("x")),n.appendChild(this.scrollbarXRail),this.scrollbarX=i(m.element.thumb("x")),this.scrollbarXRail.appendChild(this.scrollbarX),this.scrollbarX.setAttribute("tabindex",0),this.event.bind(this.scrollbarX,"focus",s),this.event.bind(this.scrollbarX,"blur",a),this.scrollbarXActive=null,this.scrollbarXWidth=null,this.scrollbarXLeft=null;var c=t(this.scrollbarXRail);this.scrollbarXBottom=parseInt(c.bottom,10),isNaN(this.scrollbarXBottom)?(this.isScrollbarXUsingBottom=!1,this.scrollbarXTop=u(c.top)):this.isScrollbarXUsingBottom=!0,this.railBorderXWidth=u(c.borderLeftWidth)+u(c.borderRightWidth),e(this.scrollbarXRail,{display:"block"}),this.railXMarginWidth=u(c.marginLeft)+u(c.marginRight),e(this.scrollbarXRail,{display:""}),this.railXWidth=null,this.railXRatio=null,this.scrollbarYRail=i(m.element.rail("y")),n.appendChild(this.scrollbarYRail),this.scrollbarY=i(m.element.thumb("y")),this.scrollbarYRail.appendChild(this.scrollbarY),this.scrollbarY.setAttribute("tabindex",0),this.event.bind(this.scrollbarY,"focus",s),this.event.bind(this.scrollbarY,"blur",a),this.scrollbarYActive=null,this.scrollbarYHeight=null,this.scrollbarYTop=null;var h=t(this.scrollbarYRail);this.scrollbarYRight=parseInt(h.right,10),isNaN(this.scrollbarYRight)?(this.isScrollbarYUsingRight=!1,this.scrollbarYLeft=u(h.left)):this.isScrollbarYUsingRight=!0,this.scrollbarYOuterWidth=this.isRtl?p(this.scrollbarY):null,this.railBorderYWidth=u(h.borderTopWidth)+u(h.borderBottomWidth),e(this.scrollbarYRail,{display:"block"}),this.railYMarginHeight=u(h.marginTop)+u(h.marginBottom),e(this.scrollbarYRail,{display:""}),this.railYHeight=null,this.railYRatio=null,this.reach={x:n.scrollLeft<=0?"start":n.scrollLeft>=this.contentWidth-this.containerWidth?"end":null,y:n.scrollTop<=0?"start":n.scrollTop>=this.contentHeight-this.containerHeight?"end":null},this.isAlive=!0,this.settings.handlers.forEach(function(t){return T[t](l)}),this.lastScrollTop=n.scrollTop,this.lastScrollLeft=n.scrollLeft,this.event.bind(this.element,"scroll",function(t){return l.onScroll(t)}),R(this)};return H.prototype.update=function(){this.isAlive&&(this.negativeScrollAdjustment=this.isNegativeScroll?this.element.scrollWidth-this.element.clientWidth:0,e(this.scrollbarXRail,{display:"block"}),e(this.scrollbarYRail,{display:"block"}),this.railXMarginWidth=u(t(this.scrollbarXRail).marginLeft)+u(t(this.scrollbarXRail).marginRight),this.railYMarginHeight=u(t(this.scrollbarYRail).marginTop)+u(t(this.scrollbarYRail).marginBottom),e(this.scrollbarXRail,{display:"none"}),e(this.scrollbarYRail,{display:"none"}),R(this),y(this,"top",0,!1,!0),y(this,"left",0,!1,!0),e(this.scrollbarXRail,{display:""}),e(this.scrollbarYRail,{display:""}))},H.prototype.onScroll=function(t){this.isAlive&&(R(this),y(this,"top",this.element.scrollTop-this.lastScrollTop),y(this,"left",this.element.scrollLeft-this.lastScrollLeft),this.lastScrollTop=this.element.scrollTop,this.lastScrollLeft=this.element.scrollLeft)},H.prototype.destroy=function(){this.isAlive&&(this.event.unbindAll(),r(this.scrollbarX),r(this.scrollbarY),r(this.scrollbarXRail),r(this.scrollbarYRail),this.removePsClasses(),this.element=null,this.scrollbarX=null,this.scrollbarY=null,this.scrollbarXRail=null,this.scrollbarYRail=null,this.isAlive=!1)},H.prototype.removePsClasses=function(){this.element.className=this.element.className.split(" ").filter(function(t){return!t.match(/^ps([-_].+|)$/)}).join(" ")},H}); \ No newline at end of file +!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):t.PerfectScrollbar=e()}(this,function(){"use strict";function t(t){return getComputedStyle(t)}function e(t,e){for(var i in e){var r=e[i];"number"==typeof r&&(r+="px"),t.style[i]=r}return t}function i(t){var e=document.createElement("div");return e.className=t,e}function r(t,e){if(!v)throw new Error("No element matching method supported");return v.call(t,e)}function l(t){t.remove?t.remove():t.parentNode&&t.parentNode.removeChild(t)}function n(t,e){return Array.prototype.filter.call(t.children,function(t){return r(t,e)})}function o(t,e){var i=t.element.classList,r=m.state.scrolling(e);i.contains(r)?clearTimeout(Y[e]):i.add(r)}function s(t,e){Y[e]=setTimeout(function(){return t.isAlive&&t.element.classList.remove(m.state.scrolling(e))},t.settings.scrollingThreshold)}function a(t,e){o(t,e),s(t,e)}function c(t){if("function"==typeof window.CustomEvent)return new CustomEvent(t);var e=document.createEvent("CustomEvent");return e.initCustomEvent(t,!1,!1,void 0),e}function h(t,e,i,r,l){var n=i[0],o=i[1],s=i[2],h=i[3],u=i[4],d=i[5];void 0===r&&(r=!0),void 0===l&&(l=!1);var f=t.element;t.reach[h]=null,f[s]<1&&(t.reach[h]="start"),f[s]>t[n]-t[o]-1&&(t.reach[h]="end"),e&&(f.dispatchEvent(c("ps-scroll-"+h)),e<0?f.dispatchEvent(c("ps-scroll-"+u)):e>0&&f.dispatchEvent(c("ps-scroll-"+d)),r&&a(t,h)),t.reach[h]&&(e||l)&&f.dispatchEvent(c("ps-"+h+"-reach-"+t.reach[h]))}function u(t){return parseInt(t,10)||0}function d(t){return r(t,"input,[contenteditable]")||r(t,"select,[contenteditable]")||r(t,"textarea,[contenteditable]")||r(t,"button,[contenteditable]")}function f(e){var i=t(e);return u(i.width)+u(i.paddingLeft)+u(i.paddingRight)+u(i.borderLeftWidth)+u(i.borderRightWidth)}function p(t,e){return t.settings.minScrollbarLength&&(e=Math.max(e,t.settings.minScrollbarLength)),t.settings.maxScrollbarLength&&(e=Math.min(e,t.settings.maxScrollbarLength)),e}function b(t,i){var r={width:i.railXWidth};i.isRtl?r.left=i.negativeScrollAdjustment+t.scrollLeft+i.containerWidth-i.contentWidth:r.left=t.scrollLeft,i.isScrollbarXUsingBottom?r.bottom=i.scrollbarXBottom-t.scrollTop:r.top=i.scrollbarXTop+t.scrollTop,e(i.scrollbarXRail,r);var l={top:t.scrollTop,height:i.railYHeight};i.isScrollbarYUsingRight?i.isRtl?l.right=i.contentWidth-(i.negativeScrollAdjustment+t.scrollLeft)-i.scrollbarYRight-i.scrollbarYOuterWidth:l.right=i.scrollbarYRight-t.scrollLeft:i.isRtl?l.left=i.negativeScrollAdjustment+t.scrollLeft+2*i.containerWidth-i.contentWidth-i.scrollbarYLeft-i.scrollbarYOuterWidth:l.left=i.scrollbarYLeft+t.scrollLeft,e(i.scrollbarYRail,l),e(i.scrollbarX,{left:i.scrollbarXLeft,width:i.scrollbarXWidth-i.railBorderXWidth}),e(i.scrollbarY,{top:i.scrollbarYTop,height:i.scrollbarYHeight-i.railBorderYWidth})}function g(t,e){function i(e){p[d]=b+v*(e[a]-g),o(t,f),T(t),e.stopPropagation(),e.preventDefault()}function r(){s(t,f),t.event.unbind(t.ownerDocument,"mousemove",i)}var l=e[0],n=e[1],a=e[2],c=e[3],h=e[4],u=e[5],d=e[6],f=e[7],p=t.element,b=null,g=null,v=null;t.event.bind(t[h],"mousedown",function(e){b=p[d],g=e[a],v=(t[n]-t[l])/(t[c]-t[u]),t.event.bind(t.ownerDocument,"mousemove",i),t.event.once(t.ownerDocument,"mouseup",r),e.stopPropagation(),e.preventDefault()})}var v="undefined"!=typeof Element&&(Element.prototype.matches||Element.prototype.webkitMatchesSelector||Element.prototype.msMatchesSelector),m={main:"ps",element:{thumb:function(t){return"ps__thumb-"+t},rail:function(t){return"ps__rail-"+t},consuming:"ps__child--consume"},state:{focus:"ps--focus",active:function(t){return"ps--active-"+t},scrolling:function(t){return"ps--scrolling-"+t}}},Y={x:null,y:null},X=function(t){this.element=t,this.handlers={}},w={isEmpty:{configurable:!0}};X.prototype.bind=function(t,e){void 0===this.handlers[t]&&(this.handlers[t]=[]),this.handlers[t].push(e),this.element.addEventListener(t,e,!1)},X.prototype.unbind=function(t,e){var i=this;this.handlers[t]=this.handlers[t].filter(function(r){return!(!e||r===e)||(i.element.removeEventListener(t,r,!1),!1)})},X.prototype.unbindAll=function(){var t=this;for(var e in t.handlers)t.unbind(e)},w.isEmpty.get=function(){var t=this;return Object.keys(this.handlers).every(function(e){return 0===t.handlers[e].length})},Object.defineProperties(X.prototype,w);var y=function(){this.eventElements=[]};y.prototype.eventElement=function(t){var e=this.eventElements.filter(function(e){return e.element===t})[0];return e||(e=new X(t),this.eventElements.push(e)),e},y.prototype.bind=function(t,e,i){this.eventElement(t).bind(e,i)},y.prototype.unbind=function(t,e,i){var r=this.eventElement(t);r.unbind(e,i),r.isEmpty&&this.eventElements.splice(this.eventElements.indexOf(r),1)},y.prototype.unbindAll=function(){this.eventElements.forEach(function(t){return t.unbindAll()}),this.eventElements=[]},y.prototype.once=function(t,e,i){var r=this.eventElement(t),l=function(t){r.unbind(e,l),i(t)};r.bind(e,l)};var W=function(t,e,i,r,l){void 0===r&&(r=!0),void 0===l&&(l=!1);var n;if("top"===e)n=["contentHeight","containerHeight","scrollTop","y","up","down"];else{if("left"!==e)throw new Error("A proper axis should be provided");n=["contentWidth","containerWidth","scrollLeft","x","left","right"]}h(t,i,n,r,l)},L={isWebKit:"undefined"!=typeof document&&"WebkitAppearance"in document.documentElement.style,supportsTouch:"undefined"!=typeof window&&("ontouchstart"in window||window.DocumentTouch&&document instanceof window.DocumentTouch),supportsIePointer:"undefined"!=typeof navigator&&navigator.msMaxTouchPoints,isChrome:"undefined"!=typeof navigator&&/Chrome/i.test(navigator&&navigator.userAgent)},T=function(t){var e=t.element;t.containerWidth=e.clientWidth,t.containerHeight=e.clientHeight,t.contentWidth=e.scrollWidth,t.contentHeight=e.scrollHeight,e.contains(t.scrollbarXRail)||(n(e,m.element.rail("x")).forEach(function(t){return l(t)}),e.appendChild(t.scrollbarXRail)),e.contains(t.scrollbarYRail)||(n(e,m.element.rail("y")).forEach(function(t){return l(t)}),e.appendChild(t.scrollbarYRail)),!t.settings.suppressScrollX&&t.containerWidth+t.settings.scrollXMarginOffset=t.railXWidth-t.scrollbarXWidth&&(t.scrollbarXLeft=t.railXWidth-t.scrollbarXWidth),t.scrollbarYTop>=t.railYHeight-t.scrollbarYHeight&&(t.scrollbarYTop=t.railYHeight-t.scrollbarYHeight),b(e,t),t.scrollbarXActive?e.classList.add(m.state.active("x")):(e.classList.remove(m.state.active("x")),t.scrollbarXWidth=0,t.scrollbarXLeft=0,e.scrollLeft=0),t.scrollbarYActive?e.classList.add(m.state.active("y")):(e.classList.remove(m.state.active("y")),t.scrollbarYHeight=0,t.scrollbarYTop=0,e.scrollTop=0)},R={"click-rail":function(t){t.event.bind(t.scrollbarY,"mousedown",function(t){return t.stopPropagation()}),t.event.bind(t.scrollbarYRail,"mousedown",function(e){var i=e.pageY-window.pageYOffset-t.scrollbarYRail.getBoundingClientRect().top>t.scrollbarYTop?1:-1;t.element.scrollTop+=i*t.containerHeight,T(t),e.stopPropagation()}),t.event.bind(t.scrollbarX,"mousedown",function(t){return t.stopPropagation()}),t.event.bind(t.scrollbarXRail,"mousedown",function(e){var i=e.pageX-window.pageXOffset-t.scrollbarXRail.getBoundingClientRect().left>t.scrollbarXLeft?1:-1;t.element.scrollLeft+=i*t.containerWidth,T(t),e.stopPropagation()})},"drag-thumb":function(t){g(t,["containerWidth","contentWidth","pageX","railXWidth","scrollbarX","scrollbarXWidth","scrollLeft","x"]),g(t,["containerHeight","contentHeight","pageY","railYHeight","scrollbarY","scrollbarYHeight","scrollTop","y"])},keyboard:function(t){function e(e,r){var l=i.scrollTop;if(0===e){if(!t.scrollbarYActive)return!1;if(0===l&&r>0||l>=t.contentHeight-t.containerHeight&&r<0)return!t.settings.wheelPropagation}var n=i.scrollLeft;if(0===r){if(!t.scrollbarXActive)return!1;if(0===n&&e<0||n>=t.contentWidth-t.containerWidth&&e>0)return!t.settings.wheelPropagation}return!0}var i=t.element,l=function(){return r(i,":hover")},n=function(){return r(t.scrollbarX,":focus")||r(t.scrollbarY,":focus")};t.event.bind(t.ownerDocument,"keydown",function(r){if(!(r.isDefaultPrevented&&r.isDefaultPrevented()||r.defaultPrevented)&&(l()||n())){var o=document.activeElement?document.activeElement:t.ownerDocument.activeElement;if(o){if("IFRAME"===o.tagName)o=o.contentDocument.activeElement;else for(;o.shadowRoot;)o=o.shadowRoot.activeElement;if(d(o))return}var s=0,a=0;switch(r.which){case 37:s=r.metaKey?-t.contentWidth:r.altKey?-t.containerWidth:-30;break;case 38:a=r.metaKey?t.contentHeight:r.altKey?t.containerHeight:30;break;case 39:s=r.metaKey?t.contentWidth:r.altKey?t.containerWidth:30;break;case 40:a=r.metaKey?-t.contentHeight:r.altKey?-t.containerHeight:-30;break;case 32:a=r.shiftKey?t.containerHeight:-t.containerHeight;break;case 33:a=t.containerHeight;break;case 34:a=-t.containerHeight;break;case 36:a=t.contentHeight;break;case 35:a=-t.contentHeight;break;default:return}t.settings.suppressScrollX&&0!==s||t.settings.suppressScrollY&&0!==a||(i.scrollTop-=a,i.scrollLeft+=s,T(t),e(s,a)&&r.preventDefault())}})},wheel:function(e){function i(t,i){var r=0===o.scrollTop,l=o.scrollTop+o.offsetHeight===o.scrollHeight,n=0===o.scrollLeft,s=o.scrollLeft+o.offsetWidth===o.offsetWidth;return!(Math.abs(i)>Math.abs(t)?r||l:n||s)||!e.settings.wheelPropagation}function r(t){var e=t.deltaX,i=-1*t.deltaY;return void 0!==e&&void 0!==i||(e=-1*t.wheelDeltaX/6,i=t.wheelDeltaY/6),t.deltaMode&&1===t.deltaMode&&(e*=10,i*=10),e!==e&&i!==i&&(e=0,i=t.wheelDelta),t.shiftKey?[-i,-e]:[e,i]}function l(e,i,r){if(!L.isWebKit&&o.querySelector("select:focus"))return!0;if(!o.contains(e))return!1;for(var l=e;l&&l!==o;){if(l.classList.contains(m.element.consuming))return!0;var n=t(l);if([n.overflow,n.overflowX,n.overflowY].join("").match(/(scroll|auto)/)){var s=l.scrollHeight-l.clientHeight;if(s>0&&!(0===l.scrollTop&&r>0||l.scrollTop===s&&r<0))return!0;var a=l.scrollLeft-l.clientWidth;if(a>0&&!(0===l.scrollLeft&&i<0||l.scrollLeft===a&&i>0))return!0}l=l.parentNode}return!1}function n(t){var n=r(t),s=n[0],a=n[1];if(!l(t.target,s,a)){var c=!1;e.settings.useBothWheelAxes?e.scrollbarYActive&&!e.scrollbarXActive?(a?o.scrollTop-=a*e.settings.wheelSpeed:o.scrollTop+=s*e.settings.wheelSpeed,c=!0):e.scrollbarXActive&&!e.scrollbarYActive&&(s?o.scrollLeft+=s*e.settings.wheelSpeed:o.scrollLeft-=a*e.settings.wheelSpeed,c=!0):(o.scrollTop-=a*e.settings.wheelSpeed,o.scrollLeft+=s*e.settings.wheelSpeed),T(e),(c=c||i(s,a))&&!t.ctrlKey&&(t.stopPropagation(),t.preventDefault())}}var o=e.element;void 0!==window.onwheel?e.event.bind(o,"wheel",n):void 0!==window.onmousewheel&&e.event.bind(o,"mousewheel",n)},touch:function(e){function i(t,i){var r=h.scrollTop,l=h.scrollLeft,n=Math.abs(t),o=Math.abs(i);if(o>n){if(i<0&&r===e.contentHeight-e.containerHeight||i>0&&0===r)return 0===window.scrollY&&i>0&&L.isChrome}else if(n>o&&(t<0&&l===e.contentWidth-e.containerWidth||t>0&&0===l))return!0;return!0}function r(t,i){h.scrollTop-=i,h.scrollLeft-=t,T(e)}function l(t){return t.targetTouches?t.targetTouches[0]:t}function n(t){return!(t.pointerType&&"pen"===t.pointerType&&0===t.buttons||(!t.targetTouches||1!==t.targetTouches.length)&&(!t.pointerType||"mouse"===t.pointerType||t.pointerType===t.MSPOINTER_TYPE_MOUSE))}function o(t){if(n(t)){var e=l(t);u.pageX=e.pageX,u.pageY=e.pageY,d=(new Date).getTime(),null!==p&&clearInterval(p)}}function s(e,i,r){if(!h.contains(e))return!1;for(var l=e;l&&l!==h;){if(l.classList.contains(m.element.consuming))return!0;var n=t(l);if([n.overflow,n.overflowX,n.overflowY].join("").match(/(scroll|auto)/)){var o=l.scrollHeight-l.clientHeight;if(o>0&&!(0===l.scrollTop&&r>0||l.scrollTop===o&&r<0))return!0;var s=l.scrollLeft-l.clientWidth;if(s>0&&!(0===l.scrollLeft&&i<0||l.scrollLeft===s&&i>0))return!0}l=l.parentNode}return!1}function a(t){if(n(t)){var e=l(t),o={pageX:e.pageX,pageY:e.pageY},a=o.pageX-u.pageX,c=o.pageY-u.pageY;if(s(t.target,a,c))return;r(a,c),u=o;var h=(new Date).getTime(),p=h-d;p>0&&(f.x=a/p,f.y=c/p,d=h),i(a,c)&&t.preventDefault()}}function c(){e.settings.swipeEasing&&(clearInterval(p),p=setInterval(function(){e.isInitialized?clearInterval(p):f.x||f.y?Math.abs(f.x)<.01&&Math.abs(f.y)<.01?clearInterval(p):(r(30*f.x,30*f.y),f.x*=.8,f.y*=.8):clearInterval(p)},10))}if(L.supportsTouch||L.supportsIePointer){var h=e.element,u={},d=0,f={},p=null;L.supportsTouch?(e.event.bind(h,"touchstart",o),e.event.bind(h,"touchmove",a),e.event.bind(h,"touchend",c)):L.supportsIePointer&&(window.PointerEvent?(e.event.bind(h,"pointerdown",o),e.event.bind(h,"pointermove",a),e.event.bind(h,"pointerup",c)):window.MSPointerEvent&&(e.event.bind(h,"MSPointerDown",o),e.event.bind(h,"MSPointerMove",a),e.event.bind(h,"MSPointerUp",c)))}}},H=function(r,l){var n=this;if(void 0===l&&(l={}),"string"==typeof r&&(r=document.querySelector(r)),!r||!r.nodeName)throw new Error("no element is specified to initialize PerfectScrollbar");this.element=r,r.classList.add(m.main),this.settings={handlers:["click-rail","drag-thumb","keyboard","wheel","touch"],maxScrollbarLength:null,minScrollbarLength:null,scrollingThreshold:1e3,scrollXMarginOffset:0,scrollYMarginOffset:0,suppressScrollX:!1,suppressScrollY:!1,swipeEasing:!0,useBothWheelAxes:!1,wheelPropagation:!1,wheelSpeed:1};for(var o in l)n.settings[o]=l[o];this.containerWidth=null,this.containerHeight=null,this.contentWidth=null,this.contentHeight=null;var s=function(){return r.classList.add(m.state.focus)},a=function(){return r.classList.remove(m.state.focus)};this.isRtl="rtl"===t(r).direction,this.isNegativeScroll=function(){var t=r.scrollLeft,e=null;return r.scrollLeft=-1,e=r.scrollLeft<0,r.scrollLeft=t,e}(),this.negativeScrollAdjustment=this.isNegativeScroll?r.scrollWidth-r.clientWidth:0,this.event=new y,this.ownerDocument=r.ownerDocument||document,this.scrollbarXRail=i(m.element.rail("x")),r.appendChild(this.scrollbarXRail),this.scrollbarX=i(m.element.thumb("x")),this.scrollbarXRail.appendChild(this.scrollbarX),this.scrollbarX.setAttribute("tabindex",0),this.event.bind(this.scrollbarX,"focus",s),this.event.bind(this.scrollbarX,"blur",a),this.scrollbarXActive=null,this.scrollbarXWidth=null,this.scrollbarXLeft=null;var c=t(this.scrollbarXRail);this.scrollbarXBottom=parseInt(c.bottom,10),isNaN(this.scrollbarXBottom)?(this.isScrollbarXUsingBottom=!1,this.scrollbarXTop=u(c.top)):this.isScrollbarXUsingBottom=!0,this.railBorderXWidth=u(c.borderLeftWidth)+u(c.borderRightWidth),e(this.scrollbarXRail,{display:"block"}),this.railXMarginWidth=u(c.marginLeft)+u(c.marginRight),e(this.scrollbarXRail,{display:""}),this.railXWidth=null,this.railXRatio=null,this.scrollbarYRail=i(m.element.rail("y")),r.appendChild(this.scrollbarYRail),this.scrollbarY=i(m.element.thumb("y")),this.scrollbarYRail.appendChild(this.scrollbarY),this.scrollbarY.setAttribute("tabindex",0),this.event.bind(this.scrollbarY,"focus",s),this.event.bind(this.scrollbarY,"blur",a),this.scrollbarYActive=null,this.scrollbarYHeight=null,this.scrollbarYTop=null;var h=t(this.scrollbarYRail);this.scrollbarYRight=parseInt(h.right,10),isNaN(this.scrollbarYRight)?(this.isScrollbarYUsingRight=!1,this.scrollbarYLeft=u(h.left)):this.isScrollbarYUsingRight=!0,this.scrollbarYOuterWidth=this.isRtl?f(this.scrollbarY):null,this.railBorderYWidth=u(h.borderTopWidth)+u(h.borderBottomWidth),e(this.scrollbarYRail,{display:"block"}),this.railYMarginHeight=u(h.marginTop)+u(h.marginBottom),e(this.scrollbarYRail,{display:""}),this.railYHeight=null,this.railYRatio=null,this.reach={x:r.scrollLeft<=0?"start":r.scrollLeft>=this.contentWidth-this.containerWidth?"end":null,y:r.scrollTop<=0?"start":r.scrollTop>=this.contentHeight-this.containerHeight?"end":null},this.isAlive=!0,this.settings.handlers.forEach(function(t){return R[t](n)}),this.lastScrollTop=r.scrollTop,this.lastScrollLeft=r.scrollLeft,this.event.bind(this.element,"scroll",function(t){return n.onScroll(t)}),T(this)};return H.prototype.update=function(){this.isAlive&&(this.negativeScrollAdjustment=this.isNegativeScroll?this.element.scrollWidth-this.element.clientWidth:0,e(this.scrollbarXRail,{display:"block"}),e(this.scrollbarYRail,{display:"block"}),this.railXMarginWidth=u(t(this.scrollbarXRail).marginLeft)+u(t(this.scrollbarXRail).marginRight),this.railYMarginHeight=u(t(this.scrollbarYRail).marginTop)+u(t(this.scrollbarYRail).marginBottom),e(this.scrollbarXRail,{display:"none"}),e(this.scrollbarYRail,{display:"none"}),T(this),W(this,"top",0,!1,!0),W(this,"left",0,!1,!0),e(this.scrollbarXRail,{display:""}),e(this.scrollbarYRail,{display:""}))},H.prototype.onScroll=function(t){this.isAlive&&(T(this),W(this,"top",this.element.scrollTop-this.lastScrollTop),W(this,"left",this.element.scrollLeft-this.lastScrollLeft),this.lastScrollTop=this.element.scrollTop,this.lastScrollLeft=this.element.scrollLeft)},H.prototype.destroy=function(){this.isAlive&&(this.event.unbindAll(),l(this.scrollbarX),l(this.scrollbarY),l(this.scrollbarXRail),l(this.scrollbarYRail),this.removePsClasses(),this.element=null,this.scrollbarX=null,this.scrollbarY=null,this.scrollbarXRail=null,this.scrollbarYRail=null,this.isAlive=!1)},H.prototype.removePsClasses=function(){this.element.className=this.element.className.split(" ").filter(function(t){return!t.match(/^ps([-_].+|)$/)}).join(" ")},H}); \ No newline at end of file diff --git a/docs/perfect-scrollbar.min.js b/docs/perfect-scrollbar.min.js index b5d61d2..dfa8188 100644 --- a/docs/perfect-scrollbar.min.js +++ b/docs/perfect-scrollbar.min.js @@ -1,6 +1,6 @@ /*! - * perfect-scrollbar v1.2.0 + * perfect-scrollbar v1.3.0 * (c) 2017 Hyunje Jun * @license MIT */ -!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):t.PerfectScrollbar=e()}(this,function(){"use strict";function t(t){return getComputedStyle(t)}function e(t,e){for(var i in e){var n=e[i];"number"==typeof n&&(n+="px"),t.style[i]=n}return t}function i(t){var e=document.createElement("div");return e.className=t,e}function n(t,e){if(!v)throw new Error("No element matching method supported");return v.call(t,e)}function r(t){t.remove?t.remove():t.parentNode&&t.parentNode.removeChild(t)}function l(t,e){return Array.prototype.filter.call(t.children,function(t){return n(t,e)})}function o(t,e){var i=t.element.classList,n=m.state.scrolling(e);i.contains(n)?clearTimeout(w[e]):i.add(n)}function s(t,e){w[e]=setTimeout(function(){return t.isAlive&&t.element.classList.remove(m.state.scrolling(e))},t.settings.scrollingThreshold)}function a(t,e){o(t,e),s(t,e)}function c(t){if("function"==typeof window.CustomEvent)return new CustomEvent(t);var e=document.createEvent("CustomEvent");return e.initCustomEvent(t,!1,!1,void 0),e}function h(t,e,i,n,r){var l=i[0],o=i[1],s=i[2],h=i[3],u=i[4],d=i[5];void 0===n&&(n=!0),void 0===r&&(r=!1);var p=t.element;t.reach[h]=null,p[s]<1&&(t.reach[h]="start"),p[s]>t[l]-t[o]-1&&(t.reach[h]="end"),e&&(p.dispatchEvent(c("ps-scroll-"+h)),e<0?p.dispatchEvent(c("ps-scroll-"+u)):e>0&&p.dispatchEvent(c("ps-scroll-"+d)),n&&a(t,h)),t.reach[h]&&(e||r)&&p.dispatchEvent(c("ps-"+h+"-reach-"+t.reach[h]))}function u(t){return parseInt(t,10)||0}function d(t){return n(t,"input,[contenteditable]")||n(t,"select,[contenteditable]")||n(t,"textarea,[contenteditable]")||n(t,"button,[contenteditable]")}function p(e){var i=t(e);return u(i.width)+u(i.paddingLeft)+u(i.paddingRight)+u(i.borderLeftWidth)+u(i.borderRightWidth)}function f(t,e){return t.settings.minScrollbarLength&&(e=Math.max(e,t.settings.minScrollbarLength)),t.settings.maxScrollbarLength&&(e=Math.min(e,t.settings.maxScrollbarLength)),e}function b(t,i){var n={width:i.railXWidth};i.isRtl?n.left=i.negativeScrollAdjustment+t.scrollLeft+i.containerWidth-i.contentWidth:n.left=t.scrollLeft,i.isScrollbarXUsingBottom?n.bottom=i.scrollbarXBottom-t.scrollTop:n.top=i.scrollbarXTop+t.scrollTop,e(i.scrollbarXRail,n);var r={top:t.scrollTop,height:i.railYHeight};i.isScrollbarYUsingRight?i.isRtl?r.right=i.contentWidth-(i.negativeScrollAdjustment+t.scrollLeft)-i.scrollbarYRight-i.scrollbarYOuterWidth:r.right=i.scrollbarYRight-t.scrollLeft:i.isRtl?r.left=i.negativeScrollAdjustment+t.scrollLeft+2*i.containerWidth-i.contentWidth-i.scrollbarYLeft-i.scrollbarYOuterWidth:r.left=i.scrollbarYLeft+t.scrollLeft,e(i.scrollbarYRail,r),e(i.scrollbarX,{left:i.scrollbarXLeft,width:i.scrollbarXWidth-i.railBorderXWidth}),e(i.scrollbarY,{top:i.scrollbarYTop,height:i.scrollbarYHeight-i.railBorderYWidth})}function g(t,e){function i(e){f[d]=b+v*(e[a]-g),o(t,p),R(t),e.stopPropagation(),e.preventDefault()}function n(){s(t,p),t.event.unbind(t.ownerDocument,"mousemove",i)}var r=e[0],l=e[1],a=e[2],c=e[3],h=e[4],u=e[5],d=e[6],p=e[7],f=t.element,b=null,g=null,v=null;t.event.bind(t[h],"mousedown",function(e){b=f[d],g=e[a],v=(t[l]-t[r])/(t[c]-t[u]),t.event.bind(t.ownerDocument,"mousemove",i),t.event.once(t.ownerDocument,"mouseup",n),e.stopPropagation(),e.preventDefault()})}var v=Element.prototype.matches||Element.prototype.webkitMatchesSelector||Element.prototype.msMatchesSelector,m={main:"ps",element:{thumb:function(t){return"ps__thumb-"+t},rail:function(t){return"ps__rail-"+t},consuming:"ps__child--consume"},state:{focus:"ps--focus",active:function(t){return"ps--active-"+t},scrolling:function(t){return"ps--scrolling-"+t}}},w={x:null,y:null},Y=function(t){this.element=t,this.handlers={}},X={isEmpty:{configurable:!0}};Y.prototype.bind=function(t,e){void 0===this.handlers[t]&&(this.handlers[t]=[]),this.handlers[t].push(e),this.element.addEventListener(t,e,!1)},Y.prototype.unbind=function(t,e){var i=this;this.handlers[t]=this.handlers[t].filter(function(n){return!(!e||n===e)||(i.element.removeEventListener(t,n,!1),!1)})},Y.prototype.unbindAll=function(){var t=this;for(var e in t.handlers)t.unbind(e)},X.isEmpty.get=function(){var t=this;return Object.keys(this.handlers).every(function(e){return 0===t.handlers[e].length})},Object.defineProperties(Y.prototype,X);var W=function(){this.eventElements=[]};W.prototype.eventElement=function(t){var e=this.eventElements.filter(function(e){return e.element===t})[0];return e||(e=new Y(t),this.eventElements.push(e)),e},W.prototype.bind=function(t,e,i){this.eventElement(t).bind(e,i)},W.prototype.unbind=function(t,e,i){var n=this.eventElement(t);n.unbind(e,i),n.isEmpty&&this.eventElements.splice(this.eventElements.indexOf(n),1)},W.prototype.unbindAll=function(){this.eventElements.forEach(function(t){return t.unbindAll()}),this.eventElements=[]},W.prototype.once=function(t,e,i){var n=this.eventElement(t),r=function(t){n.unbind(e,r),i(t)};n.bind(e,r)};var y=function(t,e,i,n,r){void 0===n&&(n=!0),void 0===r&&(r=!1);var l;if("top"===e)l=["contentHeight","containerHeight","scrollTop","y","up","down"];else{if("left"!==e)throw new Error("A proper axis should be provided");l=["contentWidth","containerWidth","scrollLeft","x","left","right"]}h(t,i,l,n,r)},L={isWebKit:document&&"WebkitAppearance"in document.documentElement.style,supportsTouch:window&&("ontouchstart"in window||window.DocumentTouch&&document instanceof window.DocumentTouch),supportsIePointer:navigator&&navigator.msMaxTouchPoints},R=function(t){var e=t.element;t.containerWidth=e.clientWidth,t.containerHeight=e.clientHeight,t.contentWidth=e.scrollWidth,t.contentHeight=e.scrollHeight,e.contains(t.scrollbarXRail)||(l(e,m.element.rail("x")).forEach(function(t){return r(t)}),e.appendChild(t.scrollbarXRail)),e.contains(t.scrollbarYRail)||(l(e,m.element.rail("y")).forEach(function(t){return r(t)}),e.appendChild(t.scrollbarYRail)),!t.settings.suppressScrollX&&t.containerWidth+t.settings.scrollXMarginOffset=t.railXWidth-t.scrollbarXWidth&&(t.scrollbarXLeft=t.railXWidth-t.scrollbarXWidth),t.scrollbarYTop>=t.railYHeight-t.scrollbarYHeight&&(t.scrollbarYTop=t.railYHeight-t.scrollbarYHeight),b(e,t),t.scrollbarXActive?e.classList.add(m.state.active("x")):(e.classList.remove(m.state.active("x")),t.scrollbarXWidth=0,t.scrollbarXLeft=0,e.scrollLeft=0),t.scrollbarYActive?e.classList.add(m.state.active("y")):(e.classList.remove(m.state.active("y")),t.scrollbarYHeight=0,t.scrollbarYTop=0,e.scrollTop=0)},T={"click-rail":function(t){t.event.bind(t.scrollbarY,"mousedown",function(t){return t.stopPropagation()}),t.event.bind(t.scrollbarYRail,"mousedown",function(e){var i=e.pageY-window.pageYOffset-t.scrollbarYRail.getBoundingClientRect().top>t.scrollbarYTop?1:-1;t.element.scrollTop+=i*t.containerHeight,R(t),e.stopPropagation()}),t.event.bind(t.scrollbarX,"mousedown",function(t){return t.stopPropagation()}),t.event.bind(t.scrollbarXRail,"mousedown",function(e){var i=e.pageX-window.pageXOffset-t.scrollbarXRail.getBoundingClientRect().left>t.scrollbarXLeft?1:-1;t.element.scrollLeft+=i*t.containerWidth,R(t),e.stopPropagation()})},"drag-thumb":function(t){g(t,["containerWidth","contentWidth","pageX","railXWidth","scrollbarX","scrollbarXWidth","scrollLeft","x"]),g(t,["containerHeight","contentHeight","pageY","railYHeight","scrollbarY","scrollbarYHeight","scrollTop","y"])},keyboard:function(t){function e(e,n){var r=i.scrollTop;if(0===e){if(!t.scrollbarYActive)return!1;if(0===r&&n>0||r>=t.contentHeight-t.containerHeight&&n<0)return!t.settings.wheelPropagation}var l=i.scrollLeft;if(0===n){if(!t.scrollbarXActive)return!1;if(0===l&&e<0||l>=t.contentWidth-t.containerWidth&&e>0)return!t.settings.wheelPropagation}return!0}var i=t.element,r=function(){return n(i,":hover")},l=function(){return n(t.scrollbarX,":focus")||n(t.scrollbarY,":focus")};t.event.bind(t.ownerDocument,"keydown",function(n){if(!(n.isDefaultPrevented&&n.isDefaultPrevented()||n.defaultPrevented)&&(r()||l())){var o=document.activeElement?document.activeElement:t.ownerDocument.activeElement;if(o){if("IFRAME"===o.tagName)o=o.contentDocument.activeElement;else for(;o.shadowRoot;)o=o.shadowRoot.activeElement;if(d(o))return}var s=0,a=0;switch(n.which){case 37:s=n.metaKey?-t.contentWidth:n.altKey?-t.containerWidth:-30;break;case 38:a=n.metaKey?t.contentHeight:n.altKey?t.containerHeight:30;break;case 39:s=n.metaKey?t.contentWidth:n.altKey?t.containerWidth:30;break;case 40:a=n.metaKey?-t.contentHeight:n.altKey?-t.containerHeight:-30;break;case 32:a=n.shiftKey?t.containerHeight:-t.containerHeight;break;case 33:a=t.containerHeight;break;case 34:a=-t.containerHeight;break;case 36:a=t.contentHeight;break;case 35:a=-t.contentHeight;break;default:return}t.settings.suppressScrollX&&0!==s||t.settings.suppressScrollY&&0!==a||(i.scrollTop-=a,i.scrollLeft+=s,R(t),e(s,a)&&n.preventDefault())}})},wheel:function(e){function i(t,i){var n=o.scrollTop;if(0===t){if(!e.scrollbarYActive)return!1;if(0===n&&i>0||n>=e.contentHeight-e.containerHeight&&i<0)return!e.settings.wheelPropagation}var r=o.scrollLeft;if(0===i){if(!e.scrollbarXActive)return!1;if(0===r&&t<0||r>=e.contentWidth-e.containerWidth&&t>0)return!e.settings.wheelPropagation}return!0}function n(t){var e=t.deltaX,i=-1*t.deltaY;return void 0!==e&&void 0!==i||(e=-1*t.wheelDeltaX/6,i=t.wheelDeltaY/6),t.deltaMode&&1===t.deltaMode&&(e*=10,i*=10),e!==e&&i!==i&&(e=0,i=t.wheelDelta),t.shiftKey?[-i,-e]:[e,i]}function r(e,i,n){if(!L.isWebKit&&o.querySelector("select:focus"))return!0;if(!o.contains(e))return!1;for(var r=e;r&&r!==o;){if(r.classList.contains(m.element.consuming))return!0;var l=t(r);if([l.overflow,l.overflowX,l.overflowY].join("").match(/(scroll|auto)/)){var s=r.scrollHeight-r.clientHeight;if(s>0&&!(0===r.scrollTop&&n>0||r.scrollTop===s&&n<0))return!0;var a=r.scrollLeft-r.clientWidth;if(a>0&&!(0===r.scrollLeft&&i<0||r.scrollLeft===a&&i>0))return!0}r=r.parentNode}return!1}function l(t){var l=n(t),s=l[0],a=l[1];if(!r(t.target,s,a)){var c=!1;e.settings.useBothWheelAxes?e.scrollbarYActive&&!e.scrollbarXActive?(a?o.scrollTop-=a*e.settings.wheelSpeed:o.scrollTop+=s*e.settings.wheelSpeed,c=!0):e.scrollbarXActive&&!e.scrollbarYActive&&(s?o.scrollLeft+=s*e.settings.wheelSpeed:o.scrollLeft-=a*e.settings.wheelSpeed,c=!0):(o.scrollTop-=a*e.settings.wheelSpeed,o.scrollLeft+=s*e.settings.wheelSpeed),R(e),(c=c||i(s,a))&&!t.ctrlKey&&(t.stopPropagation(),t.preventDefault())}}var o=e.element;void 0!==window.onwheel?e.event.bind(o,"wheel",l):void 0!==window.onmousewheel&&e.event.bind(o,"mousewheel",l)},touch:function(t){function e(e,i){var n=h.scrollTop,r=h.scrollLeft,l=Math.abs(e),o=Math.abs(i);if(o>l){if(i<0&&n===t.contentHeight-t.containerHeight||i>0&&0===n)return{stop:!t.settings.swipePropagation,prevent:0===window.scrollY}}else if(l>o&&(e<0&&r===t.contentWidth-t.containerWidth||e>0&&0===r))return{stop:!t.settings.swipePropagation,prevent:!0};return{stop:!0,prevent:!0}}function i(e,i){h.scrollTop-=i,h.scrollLeft-=e,R(t)}function n(){b=!0}function r(){b=!1}function l(t){return t.targetTouches?t.targetTouches[0]:t}function o(t){return!(t.pointerType&&"pen"===t.pointerType&&0===t.buttons||(!t.targetTouches||1!==t.targetTouches.length)&&(!t.pointerType||"mouse"===t.pointerType||t.pointerType===t.MSPOINTER_TYPE_MOUSE))}function s(t){if(o(t)){g=!0;var e=l(t);u.pageX=e.pageX,u.pageY=e.pageY,d=(new Date).getTime(),null!==f&&clearInterval(f),t.stopPropagation()}}function a(n){if(!g&&t.settings.swipePropagation&&s(n),!b&&g&&o(n)){var r=l(n),a={pageX:r.pageX,pageY:r.pageY},c=a.pageX-u.pageX,h=a.pageY-u.pageY;i(c,h),u=a;var f=(new Date).getTime(),v=f-d;v>0&&(p.x=c/v,p.y=h/v,d=f);var m=e(c,h),w=m.stop,Y=m.prevent;w&&n.stopPropagation(),Y&&n.preventDefault()}}function c(){!b&&g&&(g=!1,t.settings.swipeEasing&&(clearInterval(f),f=setInterval(function(){t.isInitialized?clearInterval(f):p.x||p.y?Math.abs(p.x)<.01&&Math.abs(p.y)<.01?clearInterval(f):(i(30*p.x,30*p.y),p.x*=.8,p.y*=.8):clearInterval(f)},10)))}if(L.supportsTouch||L.supportsIePointer){var h=t.element,u={},d=0,p={},f=null,b=!1,g=!1;L.supportsTouch?(t.event.bind(window,"touchstart",n),t.event.bind(window,"touchend",r),t.event.bind(h,"touchstart",s),t.event.bind(h,"touchmove",a),t.event.bind(h,"touchend",c)):L.supportsIePointer&&(window.PointerEvent?(t.event.bind(window,"pointerdown",n),t.event.bind(window,"pointerup",r),t.event.bind(h,"pointerdown",s),t.event.bind(h,"pointermove",a),t.event.bind(h,"pointerup",c)):window.MSPointerEvent&&(t.event.bind(window,"MSPointerDown",n),t.event.bind(window,"MSPointerUp",r),t.event.bind(h,"MSPointerDown",s),t.event.bind(h,"MSPointerMove",a),t.event.bind(h,"MSPointerUp",c)))}}},H=function(n,r){var l=this;if(void 0===r&&(r={}),"string"==typeof n&&(n=document.querySelector(n)),!n||!n.nodeName)throw new Error("no element is specified to initialize PerfectScrollbar");this.element=n,n.classList.add(m.main),this.settings={handlers:["click-rail","drag-thumb","keyboard","wheel","touch"],maxScrollbarLength:null,minScrollbarLength:null,scrollingThreshold:1e3,scrollXMarginOffset:0,scrollYMarginOffset:0,suppressScrollX:!1,suppressScrollY:!1,swipePropagation:!0,swipeEasing:!0,useBothWheelAxes:!1,wheelPropagation:!1,wheelSpeed:1};for(var o in r)l.settings[o]=r[o];this.containerWidth=null,this.containerHeight=null,this.contentWidth=null,this.contentHeight=null;var s=function(){return n.classList.add(m.state.focus)},a=function(){return n.classList.remove(m.state.focus)};this.isRtl="rtl"===t(n).direction,this.isNegativeScroll=function(){var t=n.scrollLeft,e=null;return n.scrollLeft=-1,e=n.scrollLeft<0,n.scrollLeft=t,e}(),this.negativeScrollAdjustment=this.isNegativeScroll?n.scrollWidth-n.clientWidth:0,this.event=new W,this.ownerDocument=n.ownerDocument||document,this.scrollbarXRail=i(m.element.rail("x")),n.appendChild(this.scrollbarXRail),this.scrollbarX=i(m.element.thumb("x")),this.scrollbarXRail.appendChild(this.scrollbarX),this.scrollbarX.setAttribute("tabindex",0),this.event.bind(this.scrollbarX,"focus",s),this.event.bind(this.scrollbarX,"blur",a),this.scrollbarXActive=null,this.scrollbarXWidth=null,this.scrollbarXLeft=null;var c=t(this.scrollbarXRail);this.scrollbarXBottom=parseInt(c.bottom,10),isNaN(this.scrollbarXBottom)?(this.isScrollbarXUsingBottom=!1,this.scrollbarXTop=u(c.top)):this.isScrollbarXUsingBottom=!0,this.railBorderXWidth=u(c.borderLeftWidth)+u(c.borderRightWidth),e(this.scrollbarXRail,{display:"block"}),this.railXMarginWidth=u(c.marginLeft)+u(c.marginRight),e(this.scrollbarXRail,{display:""}),this.railXWidth=null,this.railXRatio=null,this.scrollbarYRail=i(m.element.rail("y")),n.appendChild(this.scrollbarYRail),this.scrollbarY=i(m.element.thumb("y")),this.scrollbarYRail.appendChild(this.scrollbarY),this.scrollbarY.setAttribute("tabindex",0),this.event.bind(this.scrollbarY,"focus",s),this.event.bind(this.scrollbarY,"blur",a),this.scrollbarYActive=null,this.scrollbarYHeight=null,this.scrollbarYTop=null;var h=t(this.scrollbarYRail);this.scrollbarYRight=parseInt(h.right,10),isNaN(this.scrollbarYRight)?(this.isScrollbarYUsingRight=!1,this.scrollbarYLeft=u(h.left)):this.isScrollbarYUsingRight=!0,this.scrollbarYOuterWidth=this.isRtl?p(this.scrollbarY):null,this.railBorderYWidth=u(h.borderTopWidth)+u(h.borderBottomWidth),e(this.scrollbarYRail,{display:"block"}),this.railYMarginHeight=u(h.marginTop)+u(h.marginBottom),e(this.scrollbarYRail,{display:""}),this.railYHeight=null,this.railYRatio=null,this.reach={x:n.scrollLeft<=0?"start":n.scrollLeft>=this.contentWidth-this.containerWidth?"end":null,y:n.scrollTop<=0?"start":n.scrollTop>=this.contentHeight-this.containerHeight?"end":null},this.isAlive=!0,this.settings.handlers.forEach(function(t){return T[t](l)}),this.lastScrollTop=n.scrollTop,this.lastScrollLeft=n.scrollLeft,this.event.bind(this.element,"scroll",function(t){return l.onScroll(t)}),R(this)};return H.prototype.update=function(){this.isAlive&&(this.negativeScrollAdjustment=this.isNegativeScroll?this.element.scrollWidth-this.element.clientWidth:0,e(this.scrollbarXRail,{display:"block"}),e(this.scrollbarYRail,{display:"block"}),this.railXMarginWidth=u(t(this.scrollbarXRail).marginLeft)+u(t(this.scrollbarXRail).marginRight),this.railYMarginHeight=u(t(this.scrollbarYRail).marginTop)+u(t(this.scrollbarYRail).marginBottom),e(this.scrollbarXRail,{display:"none"}),e(this.scrollbarYRail,{display:"none"}),R(this),y(this,"top",0,!1,!0),y(this,"left",0,!1,!0),e(this.scrollbarXRail,{display:""}),e(this.scrollbarYRail,{display:""}))},H.prototype.onScroll=function(t){this.isAlive&&(R(this),y(this,"top",this.element.scrollTop-this.lastScrollTop),y(this,"left",this.element.scrollLeft-this.lastScrollLeft),this.lastScrollTop=this.element.scrollTop,this.lastScrollLeft=this.element.scrollLeft)},H.prototype.destroy=function(){this.isAlive&&(this.event.unbindAll(),r(this.scrollbarX),r(this.scrollbarY),r(this.scrollbarXRail),r(this.scrollbarYRail),this.removePsClasses(),this.element=null,this.scrollbarX=null,this.scrollbarY=null,this.scrollbarXRail=null,this.scrollbarYRail=null,this.isAlive=!1)},H.prototype.removePsClasses=function(){this.element.className=this.element.className.split(" ").filter(function(t){return!t.match(/^ps([-_].+|)$/)}).join(" ")},H}); \ No newline at end of file +!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):t.PerfectScrollbar=e()}(this,function(){"use strict";function t(t){return getComputedStyle(t)}function e(t,e){for(var i in e){var r=e[i];"number"==typeof r&&(r+="px"),t.style[i]=r}return t}function i(t){var e=document.createElement("div");return e.className=t,e}function r(t,e){if(!v)throw new Error("No element matching method supported");return v.call(t,e)}function l(t){t.remove?t.remove():t.parentNode&&t.parentNode.removeChild(t)}function n(t,e){return Array.prototype.filter.call(t.children,function(t){return r(t,e)})}function o(t,e){var i=t.element.classList,r=m.state.scrolling(e);i.contains(r)?clearTimeout(Y[e]):i.add(r)}function s(t,e){Y[e]=setTimeout(function(){return t.isAlive&&t.element.classList.remove(m.state.scrolling(e))},t.settings.scrollingThreshold)}function a(t,e){o(t,e),s(t,e)}function c(t){if("function"==typeof window.CustomEvent)return new CustomEvent(t);var e=document.createEvent("CustomEvent");return e.initCustomEvent(t,!1,!1,void 0),e}function h(t,e,i,r,l){var n=i[0],o=i[1],s=i[2],h=i[3],u=i[4],d=i[5];void 0===r&&(r=!0),void 0===l&&(l=!1);var f=t.element;t.reach[h]=null,f[s]<1&&(t.reach[h]="start"),f[s]>t[n]-t[o]-1&&(t.reach[h]="end"),e&&(f.dispatchEvent(c("ps-scroll-"+h)),e<0?f.dispatchEvent(c("ps-scroll-"+u)):e>0&&f.dispatchEvent(c("ps-scroll-"+d)),r&&a(t,h)),t.reach[h]&&(e||l)&&f.dispatchEvent(c("ps-"+h+"-reach-"+t.reach[h]))}function u(t){return parseInt(t,10)||0}function d(t){return r(t,"input,[contenteditable]")||r(t,"select,[contenteditable]")||r(t,"textarea,[contenteditable]")||r(t,"button,[contenteditable]")}function f(e){var i=t(e);return u(i.width)+u(i.paddingLeft)+u(i.paddingRight)+u(i.borderLeftWidth)+u(i.borderRightWidth)}function p(t,e){return t.settings.minScrollbarLength&&(e=Math.max(e,t.settings.minScrollbarLength)),t.settings.maxScrollbarLength&&(e=Math.min(e,t.settings.maxScrollbarLength)),e}function b(t,i){var r={width:i.railXWidth};i.isRtl?r.left=i.negativeScrollAdjustment+t.scrollLeft+i.containerWidth-i.contentWidth:r.left=t.scrollLeft,i.isScrollbarXUsingBottom?r.bottom=i.scrollbarXBottom-t.scrollTop:r.top=i.scrollbarXTop+t.scrollTop,e(i.scrollbarXRail,r);var l={top:t.scrollTop,height:i.railYHeight};i.isScrollbarYUsingRight?i.isRtl?l.right=i.contentWidth-(i.negativeScrollAdjustment+t.scrollLeft)-i.scrollbarYRight-i.scrollbarYOuterWidth:l.right=i.scrollbarYRight-t.scrollLeft:i.isRtl?l.left=i.negativeScrollAdjustment+t.scrollLeft+2*i.containerWidth-i.contentWidth-i.scrollbarYLeft-i.scrollbarYOuterWidth:l.left=i.scrollbarYLeft+t.scrollLeft,e(i.scrollbarYRail,l),e(i.scrollbarX,{left:i.scrollbarXLeft,width:i.scrollbarXWidth-i.railBorderXWidth}),e(i.scrollbarY,{top:i.scrollbarYTop,height:i.scrollbarYHeight-i.railBorderYWidth})}function g(t,e){function i(e){p[d]=b+v*(e[a]-g),o(t,f),T(t),e.stopPropagation(),e.preventDefault()}function r(){s(t,f),t.event.unbind(t.ownerDocument,"mousemove",i)}var l=e[0],n=e[1],a=e[2],c=e[3],h=e[4],u=e[5],d=e[6],f=e[7],p=t.element,b=null,g=null,v=null;t.event.bind(t[h],"mousedown",function(e){b=p[d],g=e[a],v=(t[n]-t[l])/(t[c]-t[u]),t.event.bind(t.ownerDocument,"mousemove",i),t.event.once(t.ownerDocument,"mouseup",r),e.stopPropagation(),e.preventDefault()})}var v="undefined"!=typeof Element&&(Element.prototype.matches||Element.prototype.webkitMatchesSelector||Element.prototype.msMatchesSelector),m={main:"ps",element:{thumb:function(t){return"ps__thumb-"+t},rail:function(t){return"ps__rail-"+t},consuming:"ps__child--consume"},state:{focus:"ps--focus",active:function(t){return"ps--active-"+t},scrolling:function(t){return"ps--scrolling-"+t}}},Y={x:null,y:null},X=function(t){this.element=t,this.handlers={}},w={isEmpty:{configurable:!0}};X.prototype.bind=function(t,e){void 0===this.handlers[t]&&(this.handlers[t]=[]),this.handlers[t].push(e),this.element.addEventListener(t,e,!1)},X.prototype.unbind=function(t,e){var i=this;this.handlers[t]=this.handlers[t].filter(function(r){return!(!e||r===e)||(i.element.removeEventListener(t,r,!1),!1)})},X.prototype.unbindAll=function(){var t=this;for(var e in t.handlers)t.unbind(e)},w.isEmpty.get=function(){var t=this;return Object.keys(this.handlers).every(function(e){return 0===t.handlers[e].length})},Object.defineProperties(X.prototype,w);var y=function(){this.eventElements=[]};y.prototype.eventElement=function(t){var e=this.eventElements.filter(function(e){return e.element===t})[0];return e||(e=new X(t),this.eventElements.push(e)),e},y.prototype.bind=function(t,e,i){this.eventElement(t).bind(e,i)},y.prototype.unbind=function(t,e,i){var r=this.eventElement(t);r.unbind(e,i),r.isEmpty&&this.eventElements.splice(this.eventElements.indexOf(r),1)},y.prototype.unbindAll=function(){this.eventElements.forEach(function(t){return t.unbindAll()}),this.eventElements=[]},y.prototype.once=function(t,e,i){var r=this.eventElement(t),l=function(t){r.unbind(e,l),i(t)};r.bind(e,l)};var W=function(t,e,i,r,l){void 0===r&&(r=!0),void 0===l&&(l=!1);var n;if("top"===e)n=["contentHeight","containerHeight","scrollTop","y","up","down"];else{if("left"!==e)throw new Error("A proper axis should be provided");n=["contentWidth","containerWidth","scrollLeft","x","left","right"]}h(t,i,n,r,l)},L={isWebKit:"undefined"!=typeof document&&"WebkitAppearance"in document.documentElement.style,supportsTouch:"undefined"!=typeof window&&("ontouchstart"in window||window.DocumentTouch&&document instanceof window.DocumentTouch),supportsIePointer:"undefined"!=typeof navigator&&navigator.msMaxTouchPoints,isChrome:"undefined"!=typeof navigator&&/Chrome/i.test(navigator&&navigator.userAgent)},T=function(t){var e=t.element;t.containerWidth=e.clientWidth,t.containerHeight=e.clientHeight,t.contentWidth=e.scrollWidth,t.contentHeight=e.scrollHeight,e.contains(t.scrollbarXRail)||(n(e,m.element.rail("x")).forEach(function(t){return l(t)}),e.appendChild(t.scrollbarXRail)),e.contains(t.scrollbarYRail)||(n(e,m.element.rail("y")).forEach(function(t){return l(t)}),e.appendChild(t.scrollbarYRail)),!t.settings.suppressScrollX&&t.containerWidth+t.settings.scrollXMarginOffset=t.railXWidth-t.scrollbarXWidth&&(t.scrollbarXLeft=t.railXWidth-t.scrollbarXWidth),t.scrollbarYTop>=t.railYHeight-t.scrollbarYHeight&&(t.scrollbarYTop=t.railYHeight-t.scrollbarYHeight),b(e,t),t.scrollbarXActive?e.classList.add(m.state.active("x")):(e.classList.remove(m.state.active("x")),t.scrollbarXWidth=0,t.scrollbarXLeft=0,e.scrollLeft=0),t.scrollbarYActive?e.classList.add(m.state.active("y")):(e.classList.remove(m.state.active("y")),t.scrollbarYHeight=0,t.scrollbarYTop=0,e.scrollTop=0)},R={"click-rail":function(t){t.event.bind(t.scrollbarY,"mousedown",function(t){return t.stopPropagation()}),t.event.bind(t.scrollbarYRail,"mousedown",function(e){var i=e.pageY-window.pageYOffset-t.scrollbarYRail.getBoundingClientRect().top>t.scrollbarYTop?1:-1;t.element.scrollTop+=i*t.containerHeight,T(t),e.stopPropagation()}),t.event.bind(t.scrollbarX,"mousedown",function(t){return t.stopPropagation()}),t.event.bind(t.scrollbarXRail,"mousedown",function(e){var i=e.pageX-window.pageXOffset-t.scrollbarXRail.getBoundingClientRect().left>t.scrollbarXLeft?1:-1;t.element.scrollLeft+=i*t.containerWidth,T(t),e.stopPropagation()})},"drag-thumb":function(t){g(t,["containerWidth","contentWidth","pageX","railXWidth","scrollbarX","scrollbarXWidth","scrollLeft","x"]),g(t,["containerHeight","contentHeight","pageY","railYHeight","scrollbarY","scrollbarYHeight","scrollTop","y"])},keyboard:function(t){function e(e,r){var l=i.scrollTop;if(0===e){if(!t.scrollbarYActive)return!1;if(0===l&&r>0||l>=t.contentHeight-t.containerHeight&&r<0)return!t.settings.wheelPropagation}var n=i.scrollLeft;if(0===r){if(!t.scrollbarXActive)return!1;if(0===n&&e<0||n>=t.contentWidth-t.containerWidth&&e>0)return!t.settings.wheelPropagation}return!0}var i=t.element,l=function(){return r(i,":hover")},n=function(){return r(t.scrollbarX,":focus")||r(t.scrollbarY,":focus")};t.event.bind(t.ownerDocument,"keydown",function(r){if(!(r.isDefaultPrevented&&r.isDefaultPrevented()||r.defaultPrevented)&&(l()||n())){var o=document.activeElement?document.activeElement:t.ownerDocument.activeElement;if(o){if("IFRAME"===o.tagName)o=o.contentDocument.activeElement;else for(;o.shadowRoot;)o=o.shadowRoot.activeElement;if(d(o))return}var s=0,a=0;switch(r.which){case 37:s=r.metaKey?-t.contentWidth:r.altKey?-t.containerWidth:-30;break;case 38:a=r.metaKey?t.contentHeight:r.altKey?t.containerHeight:30;break;case 39:s=r.metaKey?t.contentWidth:r.altKey?t.containerWidth:30;break;case 40:a=r.metaKey?-t.contentHeight:r.altKey?-t.containerHeight:-30;break;case 32:a=r.shiftKey?t.containerHeight:-t.containerHeight;break;case 33:a=t.containerHeight;break;case 34:a=-t.containerHeight;break;case 36:a=t.contentHeight;break;case 35:a=-t.contentHeight;break;default:return}t.settings.suppressScrollX&&0!==s||t.settings.suppressScrollY&&0!==a||(i.scrollTop-=a,i.scrollLeft+=s,T(t),e(s,a)&&r.preventDefault())}})},wheel:function(e){function i(t,i){var r=0===o.scrollTop,l=o.scrollTop+o.offsetHeight===o.scrollHeight,n=0===o.scrollLeft,s=o.scrollLeft+o.offsetWidth===o.offsetWidth;return!(Math.abs(i)>Math.abs(t)?r||l:n||s)||!e.settings.wheelPropagation}function r(t){var e=t.deltaX,i=-1*t.deltaY;return void 0!==e&&void 0!==i||(e=-1*t.wheelDeltaX/6,i=t.wheelDeltaY/6),t.deltaMode&&1===t.deltaMode&&(e*=10,i*=10),e!==e&&i!==i&&(e=0,i=t.wheelDelta),t.shiftKey?[-i,-e]:[e,i]}function l(e,i,r){if(!L.isWebKit&&o.querySelector("select:focus"))return!0;if(!o.contains(e))return!1;for(var l=e;l&&l!==o;){if(l.classList.contains(m.element.consuming))return!0;var n=t(l);if([n.overflow,n.overflowX,n.overflowY].join("").match(/(scroll|auto)/)){var s=l.scrollHeight-l.clientHeight;if(s>0&&!(0===l.scrollTop&&r>0||l.scrollTop===s&&r<0))return!0;var a=l.scrollLeft-l.clientWidth;if(a>0&&!(0===l.scrollLeft&&i<0||l.scrollLeft===a&&i>0))return!0}l=l.parentNode}return!1}function n(t){var n=r(t),s=n[0],a=n[1];if(!l(t.target,s,a)){var c=!1;e.settings.useBothWheelAxes?e.scrollbarYActive&&!e.scrollbarXActive?(a?o.scrollTop-=a*e.settings.wheelSpeed:o.scrollTop+=s*e.settings.wheelSpeed,c=!0):e.scrollbarXActive&&!e.scrollbarYActive&&(s?o.scrollLeft+=s*e.settings.wheelSpeed:o.scrollLeft-=a*e.settings.wheelSpeed,c=!0):(o.scrollTop-=a*e.settings.wheelSpeed,o.scrollLeft+=s*e.settings.wheelSpeed),T(e),(c=c||i(s,a))&&!t.ctrlKey&&(t.stopPropagation(),t.preventDefault())}}var o=e.element;void 0!==window.onwheel?e.event.bind(o,"wheel",n):void 0!==window.onmousewheel&&e.event.bind(o,"mousewheel",n)},touch:function(e){function i(t,i){var r=h.scrollTop,l=h.scrollLeft,n=Math.abs(t),o=Math.abs(i);if(o>n){if(i<0&&r===e.contentHeight-e.containerHeight||i>0&&0===r)return 0===window.scrollY&&i>0&&L.isChrome}else if(n>o&&(t<0&&l===e.contentWidth-e.containerWidth||t>0&&0===l))return!0;return!0}function r(t,i){h.scrollTop-=i,h.scrollLeft-=t,T(e)}function l(t){return t.targetTouches?t.targetTouches[0]:t}function n(t){return!(t.pointerType&&"pen"===t.pointerType&&0===t.buttons||(!t.targetTouches||1!==t.targetTouches.length)&&(!t.pointerType||"mouse"===t.pointerType||t.pointerType===t.MSPOINTER_TYPE_MOUSE))}function o(t){if(n(t)){var e=l(t);u.pageX=e.pageX,u.pageY=e.pageY,d=(new Date).getTime(),null!==p&&clearInterval(p)}}function s(e,i,r){if(!h.contains(e))return!1;for(var l=e;l&&l!==h;){if(l.classList.contains(m.element.consuming))return!0;var n=t(l);if([n.overflow,n.overflowX,n.overflowY].join("").match(/(scroll|auto)/)){var o=l.scrollHeight-l.clientHeight;if(o>0&&!(0===l.scrollTop&&r>0||l.scrollTop===o&&r<0))return!0;var s=l.scrollLeft-l.clientWidth;if(s>0&&!(0===l.scrollLeft&&i<0||l.scrollLeft===s&&i>0))return!0}l=l.parentNode}return!1}function a(t){if(n(t)){var e=l(t),o={pageX:e.pageX,pageY:e.pageY},a=o.pageX-u.pageX,c=o.pageY-u.pageY;if(s(t.target,a,c))return;r(a,c),u=o;var h=(new Date).getTime(),p=h-d;p>0&&(f.x=a/p,f.y=c/p,d=h),i(a,c)&&t.preventDefault()}}function c(){e.settings.swipeEasing&&(clearInterval(p),p=setInterval(function(){e.isInitialized?clearInterval(p):f.x||f.y?Math.abs(f.x)<.01&&Math.abs(f.y)<.01?clearInterval(p):(r(30*f.x,30*f.y),f.x*=.8,f.y*=.8):clearInterval(p)},10))}if(L.supportsTouch||L.supportsIePointer){var h=e.element,u={},d=0,f={},p=null;L.supportsTouch?(e.event.bind(h,"touchstart",o),e.event.bind(h,"touchmove",a),e.event.bind(h,"touchend",c)):L.supportsIePointer&&(window.PointerEvent?(e.event.bind(h,"pointerdown",o),e.event.bind(h,"pointermove",a),e.event.bind(h,"pointerup",c)):window.MSPointerEvent&&(e.event.bind(h,"MSPointerDown",o),e.event.bind(h,"MSPointerMove",a),e.event.bind(h,"MSPointerUp",c)))}}},H=function(r,l){var n=this;if(void 0===l&&(l={}),"string"==typeof r&&(r=document.querySelector(r)),!r||!r.nodeName)throw new Error("no element is specified to initialize PerfectScrollbar");this.element=r,r.classList.add(m.main),this.settings={handlers:["click-rail","drag-thumb","keyboard","wheel","touch"],maxScrollbarLength:null,minScrollbarLength:null,scrollingThreshold:1e3,scrollXMarginOffset:0,scrollYMarginOffset:0,suppressScrollX:!1,suppressScrollY:!1,swipeEasing:!0,useBothWheelAxes:!1,wheelPropagation:!1,wheelSpeed:1};for(var o in l)n.settings[o]=l[o];this.containerWidth=null,this.containerHeight=null,this.contentWidth=null,this.contentHeight=null;var s=function(){return r.classList.add(m.state.focus)},a=function(){return r.classList.remove(m.state.focus)};this.isRtl="rtl"===t(r).direction,this.isNegativeScroll=function(){var t=r.scrollLeft,e=null;return r.scrollLeft=-1,e=r.scrollLeft<0,r.scrollLeft=t,e}(),this.negativeScrollAdjustment=this.isNegativeScroll?r.scrollWidth-r.clientWidth:0,this.event=new y,this.ownerDocument=r.ownerDocument||document,this.scrollbarXRail=i(m.element.rail("x")),r.appendChild(this.scrollbarXRail),this.scrollbarX=i(m.element.thumb("x")),this.scrollbarXRail.appendChild(this.scrollbarX),this.scrollbarX.setAttribute("tabindex",0),this.event.bind(this.scrollbarX,"focus",s),this.event.bind(this.scrollbarX,"blur",a),this.scrollbarXActive=null,this.scrollbarXWidth=null,this.scrollbarXLeft=null;var c=t(this.scrollbarXRail);this.scrollbarXBottom=parseInt(c.bottom,10),isNaN(this.scrollbarXBottom)?(this.isScrollbarXUsingBottom=!1,this.scrollbarXTop=u(c.top)):this.isScrollbarXUsingBottom=!0,this.railBorderXWidth=u(c.borderLeftWidth)+u(c.borderRightWidth),e(this.scrollbarXRail,{display:"block"}),this.railXMarginWidth=u(c.marginLeft)+u(c.marginRight),e(this.scrollbarXRail,{display:""}),this.railXWidth=null,this.railXRatio=null,this.scrollbarYRail=i(m.element.rail("y")),r.appendChild(this.scrollbarYRail),this.scrollbarY=i(m.element.thumb("y")),this.scrollbarYRail.appendChild(this.scrollbarY),this.scrollbarY.setAttribute("tabindex",0),this.event.bind(this.scrollbarY,"focus",s),this.event.bind(this.scrollbarY,"blur",a),this.scrollbarYActive=null,this.scrollbarYHeight=null,this.scrollbarYTop=null;var h=t(this.scrollbarYRail);this.scrollbarYRight=parseInt(h.right,10),isNaN(this.scrollbarYRight)?(this.isScrollbarYUsingRight=!1,this.scrollbarYLeft=u(h.left)):this.isScrollbarYUsingRight=!0,this.scrollbarYOuterWidth=this.isRtl?f(this.scrollbarY):null,this.railBorderYWidth=u(h.borderTopWidth)+u(h.borderBottomWidth),e(this.scrollbarYRail,{display:"block"}),this.railYMarginHeight=u(h.marginTop)+u(h.marginBottom),e(this.scrollbarYRail,{display:""}),this.railYHeight=null,this.railYRatio=null,this.reach={x:r.scrollLeft<=0?"start":r.scrollLeft>=this.contentWidth-this.containerWidth?"end":null,y:r.scrollTop<=0?"start":r.scrollTop>=this.contentHeight-this.containerHeight?"end":null},this.isAlive=!0,this.settings.handlers.forEach(function(t){return R[t](n)}),this.lastScrollTop=r.scrollTop,this.lastScrollLeft=r.scrollLeft,this.event.bind(this.element,"scroll",function(t){return n.onScroll(t)}),T(this)};return H.prototype.update=function(){this.isAlive&&(this.negativeScrollAdjustment=this.isNegativeScroll?this.element.scrollWidth-this.element.clientWidth:0,e(this.scrollbarXRail,{display:"block"}),e(this.scrollbarYRail,{display:"block"}),this.railXMarginWidth=u(t(this.scrollbarXRail).marginLeft)+u(t(this.scrollbarXRail).marginRight),this.railYMarginHeight=u(t(this.scrollbarYRail).marginTop)+u(t(this.scrollbarYRail).marginBottom),e(this.scrollbarXRail,{display:"none"}),e(this.scrollbarYRail,{display:"none"}),T(this),W(this,"top",0,!1,!0),W(this,"left",0,!1,!0),e(this.scrollbarXRail,{display:""}),e(this.scrollbarYRail,{display:""}))},H.prototype.onScroll=function(t){this.isAlive&&(T(this),W(this,"top",this.element.scrollTop-this.lastScrollTop),W(this,"left",this.element.scrollLeft-this.lastScrollLeft),this.lastScrollTop=this.element.scrollTop,this.lastScrollLeft=this.element.scrollLeft)},H.prototype.destroy=function(){this.isAlive&&(this.event.unbindAll(),l(this.scrollbarX),l(this.scrollbarY),l(this.scrollbarXRail),l(this.scrollbarYRail),this.removePsClasses(),this.element=null,this.scrollbarX=null,this.scrollbarY=null,this.scrollbarXRail=null,this.scrollbarYRail=null,this.isAlive=!1)},H.prototype.removePsClasses=function(){this.element.className=this.element.className.split(" ").filter(function(t){return!t.match(/^ps([-_].+|)$/)}).join(" ")},H}); \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index e90e10e..ffdf86a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "perfect-scrollbar", - "version": "1.2.0", + "version": "1.3.0", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index 89368ad..1577aa0 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "perfect-scrollbar", - "version": "1.2.0", + "version": "1.3.0", "description": "Minimalistic but perfect custom scrollbar plugin", "author": "Hyunje Jun ", "keywords": [ diff --git a/src/handlers/mouse-wheel.js b/src/handlers/mouse-wheel.js index f798fba..513e0d0 100644 --- a/src/handlers/mouse-wheel.js +++ b/src/handlers/mouse-wheel.js @@ -9,32 +9,23 @@ export default function(i) { let shouldPrevent = false; function shouldPreventDefault(deltaX, deltaY) { - const scrollTop = element.scrollTop; - if (deltaX === 0) { - if (!i.scrollbarYActive) { - return false; - } - if ( - (scrollTop === 0 && deltaY > 0) || - (scrollTop >= i.contentHeight - i.containerHeight && deltaY < 0) - ) { - return !i.settings.wheelPropagation; - } + const isTop = element.scrollTop === 0; + const isBottom = + element.scrollTop + element.offsetHeight === element.scrollHeight; + const isLeft = element.scrollLeft === 0; + const isRight = + element.scrollLeft + element.offsetWidth === element.offsetWidth; + + let hitsBound; + + // pick axis with primary direction + if (Math.abs(deltaY) > Math.abs(deltaX)) { + hitsBound = isTop || isBottom; + } else { + hitsBound = isLeft || isRight; } - const scrollLeft = element.scrollLeft; - if (deltaY === 0) { - if (!i.scrollbarXActive) { - return false; - } - if ( - (scrollLeft === 0 && deltaX < 0) || - (scrollLeft >= i.contentWidth - i.containerWidth && deltaX > 0) - ) { - return !i.settings.wheelPropagation; - } - } - return true; + return hitsBound ? !i.settings.wheelPropagation : true; } function getDeltaFromEvent(e) { diff --git a/src/handlers/touch.js b/src/handlers/touch.js index 9ec7ae3..07fa46b 100644 --- a/src/handlers/touch.js +++ b/src/handlers/touch.js @@ -1,4 +1,6 @@ import updateGeometry from '../update-geometry'; +import cls from '../lib/class-names'; +import * as CSS from '../lib/css'; import { env } from '../lib/util'; export default function(i) { @@ -8,7 +10,7 @@ export default function(i) { const element = i.element; - function shouldStopOrPrevent(deltaX, deltaY) { + function shouldPrevent(deltaX, deltaY) { const scrollTop = element.scrollTop; const scrollLeft = element.scrollLeft; const magnitudeX = Math.abs(deltaX); @@ -22,10 +24,7 @@ export default function(i) { (deltaY > 0 && scrollTop === 0) ) { // set prevent for mobile Chrome refresh - return { - stop: !i.settings.swipePropagation, - prevent: window.scrollY === 0, - }; + return window.scrollY === 0 && deltaY > 0 && env.isChrome; } } else if (magnitudeX > magnitudeY) { // user is perhaps trying to swipe left/right across the page @@ -34,11 +33,11 @@ export default function(i) { (deltaX < 0 && scrollLeft === i.contentWidth - i.containerWidth) || (deltaX > 0 && scrollLeft === 0) ) { - return { stop: !i.settings.swipePropagation, prevent: true }; + return true; } } - return { stop: true, prevent: true }; + return true; } function applyTouchMove(differenceX, differenceY) { @@ -52,15 +51,6 @@ export default function(i) { let startTime = 0; let speed = {}; let easingLoop = null; - let inGlobalTouch = false; - let inLocalTouch = false; - - function globalTouchStart() { - inGlobalTouch = true; - } - function globalTouchEnd() { - inGlobalTouch = false; - } function getTouch(e) { if (e.targetTouches) { @@ -93,8 +83,6 @@ export default function(i) { return; } - inLocalTouch = true; - const touch = getTouch(e); startOffset.pageX = touch.pageX; @@ -105,15 +93,55 @@ export default function(i) { if (easingLoop !== null) { clearInterval(easingLoop); } + } + + function shouldBeConsumedByChild(target, deltaX, deltaY) { + if (!element.contains(target)) { + return false; + } - e.stopPropagation(); + let cursor = target; + + while (cursor && cursor !== element) { + if (cursor.classList.contains(cls.element.consuming)) { + return true; + } + + const style = CSS.get(cursor); + const overflow = [style.overflow, style.overflowX, style.overflowY].join( + '' + ); + + // if scrollable + if (overflow.match(/(scroll|auto)/)) { + const maxScrollTop = cursor.scrollHeight - cursor.clientHeight; + if (maxScrollTop > 0) { + if ( + !(cursor.scrollTop === 0 && deltaY > 0) && + !(cursor.scrollTop === maxScrollTop && deltaY < 0) + ) { + return true; + } + } + const maxScrollLeft = cursor.scrollLeft - cursor.clientWidth; + if (maxScrollLeft > 0) { + if ( + !(cursor.scrollLeft === 0 && deltaX < 0) && + !(cursor.scrollLeft === maxScrollLeft && deltaX > 0) + ) { + return true; + } + } + } + + cursor = cursor.parentNode; + } + + return false; } function touchMove(e) { - if (!inLocalTouch && i.settings.swipePropagation) { - touchStart(e); - } - if (!inGlobalTouch && inLocalTouch && shouldHandle(e)) { + if (shouldHandle(e)) { const touch = getTouch(e); const currentOffset = { pageX: touch.pageX, pageY: touch.pageY }; @@ -121,6 +149,10 @@ export default function(i) { const differenceX = currentOffset.pageX - startOffset.pageX; const differenceY = currentOffset.pageY - startOffset.pageY; + if (shouldBeConsumedByChild(e.target, differenceX, differenceY)) { + return; + } + applyTouchMove(differenceX, differenceY); startOffset = currentOffset; @@ -133,58 +165,48 @@ export default function(i) { startTime = currentTime; } - const { stop, prevent } = shouldStopOrPrevent(differenceX, differenceY); - if (stop) e.stopPropagation(); - if (prevent) e.preventDefault(); + if (shouldPrevent(differenceX, differenceY)) { + e.preventDefault(); + } } } function touchEnd() { - if (!inGlobalTouch && inLocalTouch) { - inLocalTouch = false; - - if (i.settings.swipeEasing) { - clearInterval(easingLoop); - easingLoop = setInterval(function() { - if (i.isInitialized) { - clearInterval(easingLoop); - return; - } - - if (!speed.x && !speed.y) { - clearInterval(easingLoop); - return; - } - - if (Math.abs(speed.x) < 0.01 && Math.abs(speed.y) < 0.01) { - clearInterval(easingLoop); - return; - } - - applyTouchMove(speed.x * 30, speed.y * 30); - - speed.x *= 0.8; - speed.y *= 0.8; - }, 10); - } + if (i.settings.swipeEasing) { + clearInterval(easingLoop); + easingLoop = setInterval(function() { + if (i.isInitialized) { + clearInterval(easingLoop); + return; + } + + if (!speed.x && !speed.y) { + clearInterval(easingLoop); + return; + } + + if (Math.abs(speed.x) < 0.01 && Math.abs(speed.y) < 0.01) { + clearInterval(easingLoop); + return; + } + + applyTouchMove(speed.x * 30, speed.y * 30); + + speed.x *= 0.8; + speed.y *= 0.8; + }, 10); } } if (env.supportsTouch) { - i.event.bind(window, 'touchstart', globalTouchStart); - i.event.bind(window, 'touchend', globalTouchEnd); i.event.bind(element, 'touchstart', touchStart); i.event.bind(element, 'touchmove', touchMove); i.event.bind(element, 'touchend', touchEnd); } else if (env.supportsIePointer) { if (window.PointerEvent) { - i.event.bind(window, 'pointerdown', globalTouchStart); - i.event.bind(window, 'pointerup', globalTouchEnd); i.event.bind(element, 'pointerdown', touchStart); i.event.bind(element, 'pointermove', touchMove); i.event.bind(element, 'pointerup', touchEnd); } else if (window.MSPointerEvent) { - i.event.bind(window, 'MSPointerDown', globalTouchStart); - i.event.bind(window, 'MSPointerUp', globalTouchEnd); i.event.bind(element, 'MSPointerDown', touchStart); i.event.bind(element, 'MSPointerMove', touchMove); i.event.bind(element, 'MSPointerUp', touchEnd); diff --git a/src/index.js b/src/index.js index d2d4bd4..c9d7f11 100644 --- a/src/index.js +++ b/src/index.js @@ -21,7 +21,6 @@ const defaultSettings = () => ({ scrollYMarginOffset: 0, suppressScrollX: false, suppressScrollY: false, - swipePropagation: true, swipeEasing: true, useBothWheelAxes: false, wheelPropagation: false, diff --git a/src/lib/dom.js b/src/lib/dom.js index 8589d05..c6802c0 100644 --- a/src/lib/dom.js +++ b/src/lib/dom.js @@ -5,9 +5,10 @@ export function div(className) { } const elMatches = - Element.prototype.matches || - Element.prototype.webkitMatchesSelector || - Element.prototype.msMatchesSelector; + typeof Element !== 'undefined' && + (Element.prototype.matches || + Element.prototype.webkitMatchesSelector || + Element.prototype.msMatchesSelector); export function matches(element, query) { if (!elMatches) { diff --git a/src/lib/util.js b/src/lib/util.js index 36b9111..be52198 100644 --- a/src/lib/util.js +++ b/src/lib/util.js @@ -26,10 +26,16 @@ export function outerWidth(element) { } export const env = { - isWebKit: document && 'WebkitAppearance' in document.documentElement.style, + isWebKit: + typeof document !== 'undefined' && + 'WebkitAppearance' in document.documentElement.style, supportsTouch: - window && + typeof window !== 'undefined' && ('ontouchstart' in window || (window.DocumentTouch && document instanceof window.DocumentTouch)), - supportsIePointer: navigator && navigator.msMaxTouchPoints, + supportsIePointer: + typeof navigator !== 'undefined' && navigator.msMaxTouchPoints, + isChrome: + typeof navigator !== 'undefined' && + /Chrome/i.test(navigator && navigator.userAgent), }; diff --git a/types/perfect-scrollbar.d.ts b/types/perfect-scrollbar.d.ts index ce2f87b..a9f730e 100644 --- a/types/perfect-scrollbar.d.ts +++ b/types/perfect-scrollbar.d.ts @@ -9,7 +9,6 @@ declare namespace PerfectScrollbar { suppressScrollX?: boolean; suppressScrollY?: boolean; swipeEasing?: boolean; - swipePropagation?: boolean; useBothWheelAxes?: boolean; wheelPropagation?: boolean; wheelSpeed?: number;