\n ![\"\"]()
\n
\n null\n * @param top {Number?null} Vertical scroll position, keeps current if value is null\n * @param animate {Boolean?false} Whether the scrolling should happen using an animation\n * @param zoom {Number?null} Zoom level to go to\n */\n scrollTo: function scrollTo(left, top, animate, zoom, force, speed, easing) {\n var self = this;\n\n // Stop deceleration\n if (self.__isDecelerating) {\n core.effect.Animate.stop(self.__isDecelerating);\n self.__isDecelerating = false;\n }\n\n // Correct coordinates based on new zoom level\n if (zoom != null && zoom !== self.__zoomLevel) {\n if (!self.options.zooming) {\n throw new Error('Zooming is not enabled!');\n }\n\n left *= zoom;\n top *= zoom;\n\n // Recompute maximum values while temporary tweaking maximum scroll ranges\n self.__computeScrollMax(zoom);\n } else {\n // Keep zoom when not defined\n zoom = self.__zoomLevel;\n }\n\n if (!self.options.scrollingX && !force) {\n left = self.__scrollLeft;\n } else {\n if (self.options.paging) {\n left = Math.round(left / self.__clientWidth) * self.__clientWidth;\n } else if (self.options.snapping) {\n left = Math.round(left / self.__snapWidth) * self.__snapWidth;\n }\n }\n\n if (!self.options.scrollingY && !force) {\n top = self.__scrollTop;\n } else {\n if (self.options.paging) {\n top = Math.round(top / self.__clientHeight) * self.__clientHeight;\n } else if (self.options.snapping) {\n top = Math.round(top / self.__snapHeight) * self.__snapHeight;\n }\n }\n\n if (!force) {\n // Limit for allowed ranges\n left = Math.max(Math.min(self.__maxScrollLeft, left), 0);\n top = Math.max(Math.min(self.__maxScrollTop, top), 0);\n }\n\n // Don't animate when no change detected, still call publish to make sure\n // that rendered position is really in-sync with internal data\n if (left === self.__scrollLeft && top === self.__scrollTop) {\n animate = false;\n }\n\n // Publish new values\n if (!self.__isTracking) {\n self.__publish(left, top, zoom, animate, speed, easing);\n }\n },\n\n /**\n * Scroll by the given offset\n *\n * @param left {Number ? 0} Scroll x-axis by given offset\n * @param top {Number ? 0} Scroll x-axis by given offset\n * @param animate {Boolean ? false} Whether to animate the given change\n */\n scrollBy: function scrollBy(left, top, animate) {\n var self = this;\n\n var startLeft = self.__isAnimating ? self.__scheduledLeft : self.__scrollLeft;\n var startTop = self.__isAnimating ? self.__scheduledTop : self.__scrollTop;\n\n self.scrollTo(startLeft + (left || 0), startTop + (top || 0), animate);\n },\n getCurrentPage: function getCurrentPage() {\n this.__computePage();\n return {\n x: this.__currentPageX,\n y: this.__currentPageY\n };\n },\n goToPage: function goToPage(_ref3, animate) {\n var x = _ref3.x,\n y = _ref3.y;\n\n if (isNaN(x)) {\n x = 1;\n }\n if (isNaN(y)) {\n y = 1;\n }\n this.scrollTo((x - 1) * this.__clientWidth, (y - 1) * this.__clientHeight, animate);\n },\n\n\n /*\n ---------------------------------------------------------------------------\n EVENT CALLBACKS\n ---------------------------------------------------------------------------\n */\n\n /**\n * Mouse wheel handler for zooming support\n */\n doMouseZoom: function doMouseZoom(wheelDelta, timeStamp, pageX, pageY) {\n var self = this;\n var change = wheelDelta > 0 ? 0.97 : 1.03;\n\n return self.zoomTo(self.__zoomLevel * change, false, pageX - self.__clientLeft, pageY - self.__clientTop);\n },\n\n /**\n * Touch start handler for scrolling support\n */\n doTouchStart: function doTouchStart(touches, timeStamp) {\n // Array-like check is enough here\n if (touches.length == null) {\n throw new Error('Invalid touch list: ' + touches);\n }\n\n if (timeStamp instanceof Date) {\n timeStamp = timeStamp.valueOf();\n }\n if (typeof timeStamp !== 'number') {\n throw new Error('Invalid timestamp value: ' + timeStamp);\n }\n\n var self = this;\n\n // Reset interruptedAnimation flag\n self.__interruptedAnimation = true;\n\n // Stop deceleration\n if (self.__isDecelerating) {\n core.effect.Animate.stop(self.__isDecelerating);\n self.__isDecelerating = false;\n self.__interruptedAnimation = true;\n }\n\n // Stop animation\n if (self.__isAnimating) {\n core.effect.Animate.stop(self.__isAnimating);\n self.__isAnimating = false;\n self.__interruptedAnimation = true;\n }\n\n // Use center point when dealing with two fingers\n var currentTouchLeft, currentTouchTop;\n var isSingleTouch = touches.length === 1;\n if (isSingleTouch) {\n currentTouchLeft = touches[0].pageX;\n currentTouchTop = touches[0].pageY;\n } else {\n currentTouchLeft = Math.abs(touches[0].pageX + touches[1].pageX) / 2;\n currentTouchTop = Math.abs(touches[0].pageY + touches[1].pageY) / 2;\n }\n\n // Store initial positions\n self.__initialTouchLeft = currentTouchLeft;\n self.__initialTouchTop = currentTouchTop;\n\n // Store current zoom level\n self.__zoomLevelStart = self.__zoomLevel;\n\n // Store initial touch positions\n self.__lastTouchLeft = currentTouchLeft;\n self.__lastTouchTop = currentTouchTop;\n\n // Store initial move time stamp\n self.__lastTouchMove = timeStamp;\n\n // Reset initial scale\n self.__lastScale = 1;\n\n // Reset locking flags\n self.__enableScrollX = !isSingleTouch && self.options.scrollingX;\n self.__enableScrollY = !isSingleTouch && self.options.scrollingY;\n\n // Reset tracking flag\n self.__isTracking = true;\n\n // Reset deceleration complete flag\n self.__didDecelerationComplete = false;\n\n // Dragging starts directly with two fingers, otherwise lazy with an offset\n self.__isDragging = !isSingleTouch;\n\n // Some features are in multi touch scenarios\n self.__isSingleTouch = isSingleTouch;\n\n // Clearing data structure\n self.__positions = [];\n },\n\n /**\n * Touch move handler for scrolling support\n */\n doTouchMove: function doTouchMove(touches, timeStamp, scale) {\n // Array-like check is enough here\n if (touches.length == null) {\n throw new Error('Invalid touch list: ' + touches);\n }\n\n if (timeStamp instanceof Date) {\n timeStamp = timeStamp.valueOf();\n }\n if (typeof timeStamp !== 'number') {\n throw new Error('Invalid timestamp value: ' + timeStamp);\n }\n\n var self = this;\n\n // Ignore event when tracking is not enabled (event might be outside of element)\n if (!self.__isTracking) {\n return;\n }\n\n var currentTouchLeft, currentTouchTop;\n\n // Compute move based around of center of fingers\n if (touches.length === 2) {\n currentTouchLeft = Math.abs(touches[0].pageX + touches[1].pageX) / 2;\n currentTouchTop = Math.abs(touches[0].pageY + touches[1].pageY) / 2;\n } else {\n currentTouchLeft = touches[0].pageX;\n currentTouchTop = touches[0].pageY;\n }\n\n var positions = self.__positions;\n\n // Are we already is dragging mode?\n if (self.__isDragging) {\n // Compute move distance\n var moveX = currentTouchLeft - self.__lastTouchLeft;\n var moveY = currentTouchTop - self.__lastTouchTop;\n\n // Read previous scroll position and zooming\n var scrollLeft = self.__scrollLeft;\n var scrollTop = self.__scrollTop;\n var level = self.__zoomLevel;\n\n // Work with scaling\n if (scale != null && self.options.zooming) {\n var oldLevel = level;\n\n // Recompute level based on previous scale and new scale\n level = level / self.__lastScale * scale;\n\n // Limit level according to configuration\n level = Math.max(Math.min(level, self.options.maxZoom), self.options.minZoom);\n\n // Only do further compution when change happened\n if (oldLevel !== level) {\n // Compute relative event position to container\n var currentTouchLeftRel = currentTouchLeft - self.__clientLeft;\n var currentTouchTopRel = currentTouchTop - self.__clientTop;\n\n // Recompute left and top coordinates based on new zoom level\n scrollLeft = (currentTouchLeftRel + scrollLeft) * level / oldLevel - currentTouchLeftRel;\n scrollTop = (currentTouchTopRel + scrollTop) * level / oldLevel - currentTouchTopRel;\n\n // Recompute max scroll values\n self.__computeScrollMax(level);\n }\n }\n\n var bouncing = self.options.bouncing;\n\n if (self.__enableScrollX) {\n scrollLeft -= moveX * this.options.speedMultiplier;\n var maxScrollLeft = self.__maxScrollLeft;\n\n if (scrollLeft > maxScrollLeft || scrollLeft < 0) {\n scrollLeft += moveX / 2 * this.options.speedMultiplier;\n\n // fix scrollLeft\n scrollLeft = Math.min(Math.max(-bouncing.left, scrollLeft), maxScrollLeft + bouncing.right);\n }\n }\n\n // Compute new vertical scroll position\n if (self.__enableScrollY) {\n scrollTop -= moveY * this.options.speedMultiplier;\n var maxScrollTop = self.__maxScrollTop;\n\n if (scrollTop > maxScrollTop || scrollTop < 0) {\n scrollTop += moveY / 2 * this.options.speedMultiplier;\n\n // fix scrollTop\n scrollTop = Math.min(Math.max(-bouncing.top, scrollTop), maxScrollTop + bouncing.bottom);\n\n // Trigger pull to refresh or push to load\n if (!self.__enableScrollX && (self.__refreshHeight != null || self.__loadHeight != null)) {\n if (!self.__refreshActive && scrollTop <= -self.__refreshHeight) {\n self.__refreshActive = true;\n if (self.__refreshActivate) {\n self.__refreshActivate();\n }\n } else if (self.__refreshActive && scrollTop > -self.__refreshHeight) {\n self.__refreshActive = false;\n if (self.__refreshDeactivate) {\n self.__refreshDeactivate();\n }\n }\n // handle for push-load\n else if (!self.__loadActive && scrollTop >= self.__maxScrollTop + self.__loadHeight && self.__loadHeight > 0) {\n self.__loadActive = true;\n if (self.__loadActivate) {\n self.__loadActivate();\n }\n } else if (self.__loadActive && scrollTop < self.__maxScrollTop + self.__loadHeight) {\n self.__loadActive = false;\n if (self.__loadDeactivate) {\n self.__loadDeactivate();\n }\n }\n }\n }\n }\n\n // Keep list from growing infinitely (holding min 10, max 20 measure points)\n if (positions.length > 60) {\n positions.splice(0, 30);\n }\n\n // Track scroll movement for decleration\n positions.push(scrollLeft, scrollTop, timeStamp);\n\n // Sync scroll position\n self.__publish(scrollLeft, scrollTop, level);\n\n // Otherwise figure out whether we are switching into dragging mode now.\n } else {\n var minimumTrackingForScroll = self.options.locking ? 3 : 0;\n var minimumTrackingForDrag = 5;\n\n var distanceX = Math.abs(currentTouchLeft - self.__initialTouchLeft);\n var distanceY = Math.abs(currentTouchTop - self.__initialTouchTop);\n\n self.__enableScrollX = self.options.scrollingX && distanceX >= minimumTrackingForScroll;\n self.__enableScrollY = self.options.scrollingY && distanceY >= minimumTrackingForScroll;\n\n positions.push(self.__scrollLeft, self.__scrollTop, timeStamp);\n\n self.__isDragging = (self.__enableScrollX || self.__enableScrollY) && (distanceX >= minimumTrackingForDrag || distanceY >= minimumTrackingForDrag);\n if (self.__isDragging) {\n self.__interruptedAnimation = false;\n }\n }\n\n // Update last touch positions and time stamp for next event\n self.__lastTouchLeft = currentTouchLeft;\n self.__lastTouchTop = currentTouchTop;\n self.__lastTouchMove = timeStamp;\n self.__lastScale = scale;\n },\n\n /**\n * Touch end handler for scrolling support\n */\n doTouchEnd: function doTouchEnd(timeStamp) {\n if (timeStamp instanceof Date) {\n timeStamp = timeStamp.valueOf();\n }\n if (typeof timeStamp !== 'number') {\n throw new Error('Invalid timestamp value: ' + timeStamp);\n }\n\n var self = this;\n\n // Ignore event when tracking is not enabled (no touchstart event on element)\n // This is required as this listener ('touchmove') sits on the document and not on the element itself.\n if (!self.__isTracking) {\n return;\n }\n\n // Not touching anymore (when two finger hit the screen there are two touch end events)\n self.__isTracking = false;\n\n // Be sure to reset the dragging flag now. Here we also detect whether\n // the finger has moved fast enough to switch into a deceleration animation.\n if (self.__isDragging) {\n // Reset dragging flag\n self.__isDragging = false;\n\n // Start deceleration\n // Verify that the last move detected was in some relevant time frame\n if (self.__isSingleTouch && self.options.animating && timeStamp - self.__lastTouchMove <= 100) {\n // Then figure out what the scroll position was about 100ms ago\n var positions = self.__positions;\n var endPos = positions.length - 1;\n var startPos = endPos;\n\n // Move pointer to position measured 100ms ago\n for (var i = endPos; i > 0 && positions[i] > self.__lastTouchMove - 100; i -= 3) {\n startPos = i;\n }\n\n // If start and stop position is identical in a 100ms timeframe,\n // we cannot compute any useful deceleration.\n if (startPos !== endPos) {\n // Compute relative movement between these two points\n var timeOffset = positions[endPos] - positions[startPos];\n var movedLeft = self.__scrollLeft - positions[startPos - 2];\n var movedTop = self.__scrollTop - positions[startPos - 1];\n\n // Based on 50ms compute the movement to apply for each render step\n self.__decelerationVelocityX = movedLeft / timeOffset * (1000 / 60);\n self.__decelerationVelocityY = movedTop / timeOffset * (1000 / 60);\n\n // How much velocity is required to start the deceleration\n var minVelocityToStartDeceleration = self.options.paging || self.options.snapping ? 4 : 1;\n\n // Verify that we have enough velocity to start deceleration\n if (Math.abs(self.__decelerationVelocityX) > minVelocityToStartDeceleration || Math.abs(self.__decelerationVelocityY) > minVelocityToStartDeceleration) {\n // Deactivate pull-to-refresh when decelerating\n if (!self.__refreshActive && !self.__loadActive) {\n self.__startDeceleration(timeStamp);\n }\n } else {\n self.__scrollComplete();\n }\n } else {\n self.__scrollComplete();\n }\n } else if (timeStamp - self.__lastTouchMove > 100) {\n self.__scrollComplete();\n }\n }\n\n // If this was a slower move it is per default non decelerated, but this\n // still means that we want snap back to the bounds which is done here.\n // This is placed outside the condition above to improve edge case stability\n // e.g. touchend fired without enabled dragging. This should normally do not\n // have modified the scroll positions or even showed the scrollbars though.\n if (!self.__isDecelerating) {\n if (self.__refreshActive && self.__refreshStart) {\n // Use publish instead of scrollTo to allow scrolling to out of boundary position\n // We don't need to normalize scrollLeft, zoomLevel, etc. here because we only y-scrolling when pull-to-refresh is enabled\n self.__publish(self.__scrollLeft, -self.__refreshHeight, self.__zoomLevel, true);\n\n if (self.__refreshStart) {\n self.__refreshStart();\n }\n } else if (self.__loadActive && self.__loadStart) {\n // Use publish instead of scrollTo to allow scrolling to out of boundary position\n // We don't need to normalize scrollLeft, zoomLevel, etc. here because we only y-scrolling when pull-to-refresh is enabled\n self.__publish(self.__scrollLeft, self.__maxScrollTop + self.__loadHeight, self.__zoomLevel, true);\n\n if (self.__loadStart) {\n self.__loadStart();\n }\n } else {\n if (self.__interruptedAnimation || self.__isDragging) {\n self.__scrollComplete();\n }\n self.scrollTo(self.__scrollLeft, self.__scrollTop, true, self.__zoomLevel);\n\n // Directly signalize deactivation (nothing todo on refresh?)\n if (self.__refreshActive) {\n self.__refreshActive = false;\n if (self.__refreshDeactivate) {\n self.__refreshDeactivate();\n }\n } else if (self.__loadActive) {\n self.__loadActive = false;\n if (self.__loadDeactivate) {\n self.__loadDeactivate();\n }\n }\n }\n }\n\n // Fully cleanup list\n self.__positions.length = 0;\n },\n\n /** Handle for scroll/publish */\n onScroll: NOOP,\n\n stop: function stop() {\n var self = this;\n\n self.__disable = true;\n },\n start: function start() {\n var self = this;\n\n self.__disable = true;\n },\n /*\n ---------------------------------------------------------------------------\n PRIVATE API\n ---------------------------------------------------------------------------\n */\n\n /**\n * Applies the scroll position to the content element\n *\n * @param left {Number} Left scroll position\n * @param top {Number} Top scroll position\n * @param animate {Boolean?false} Whether animation should be used to move to the new coordinates\n */\n __publish: function __publish(left, top, zoom, animate, speed, easing) {\n var self = this;\n if (self.__disable) {\n return;\n }\n if (isNaN(left)) {\n left = this.__scrollLeft;\n }\n if (isNaN(top)) {\n top = this.__scrollTop;\n }\n // Remember whether we had an animation, then we try to continue based on the current \"drive\" of the animation\n var wasAnimating = self.__isAnimating;\n if (wasAnimating) {\n core.effect.Animate.stop(wasAnimating);\n self.__isAnimating = false;\n }\n\n if (animate && (self.options.animating || speed)) {\n // Keep scheduled positions for scrollBy/zoomBy functionality\n self.__scheduledLeft = left;\n self.__scheduledTop = top;\n self.__scheduledZoom = zoom;\n\n var oldLeft = self.__scrollLeft;\n var oldTop = self.__scrollTop;\n var oldZoom = self.__zoomLevel;\n\n var diffLeft = left - oldLeft;\n var diffTop = top - oldTop;\n var diffZoom = zoom - oldZoom;\n\n var step = function step(percent, now, render) {\n if (render) {\n self.__scrollLeft = oldLeft + diffLeft * percent;\n self.__scrollTop = oldTop + diffTop * percent;\n self.__zoomLevel = oldZoom + diffZoom * percent;\n\n // Push values out\n if (self.__callback) {\n self.__callback(self.__scrollLeft, self.__scrollTop, self.__zoomLevel);\n self.onScroll();\n }\n }\n };\n\n var verify = function verify(id) {\n return self.__isAnimating === id;\n };\n\n var completed = function completed(renderedFramesPerSecond, animationId, wasFinished) {\n if (animationId === self.__isAnimating) {\n self.__isAnimating = false;\n }\n if (self.__didDecelerationComplete || wasFinished) {\n self.__scrollComplete();\n }\n\n if (self.options.zooming) {\n self.__computeScrollMax();\n if (self.__zoomComplete) {\n self.__zoomComplete();\n self.__zoomComplete = null;\n }\n }\n\n if (self.__refreshBeforeDeactiveStarted) {\n self.__refreshBeforeDeactiveStarted = false;\n if (self.__refreshDeactivate) self.__refreshDeactivate();\n }\n\n if (self.__loadBeforeDeactiveStarted) {\n self.__loadBeforeDeactiveStarted = false;\n if (self.__loadDeactivate) self.__loadDeactivate();\n }\n };\n\n var easingFunction = animatingMethod;\n if (easing) {\n easingFunction = createEasingFunction(easing, easingPattern);\n }\n\n // When continuing based on previous animation we choose an ease-out animation instead of ease-in-out\n self.__isAnimating = core.effect.Animate.start(step, verify, completed, speed || self.options.animationDuration, wasAnimating ? easingFunction : noAnimatingMethod);\n } else {\n self.__scheduledLeft = self.__scrollLeft = left;\n self.__scheduledTop = self.__scrollTop = top;\n self.__scheduledZoom = self.__zoomLevel = zoom;\n\n // Push values out\n if (self.__callback) {\n self.__callback(left, top, zoom);\n self.onScroll();\n }\n\n // Fix max scroll ranges\n if (self.options.zooming) {\n self.__computeScrollMax();\n if (self.__zoomComplete) {\n self.__zoomComplete();\n self.__zoomComplete = null;\n }\n }\n\n if (self.__refreshBeforeDeactiveStarted) {\n self.__refreshBeforeDeactiveStarted = false;\n if (self.__refreshDeactivate) self.__refreshDeactivate();\n }\n\n if (self.__loadBeforeDeactiveStarted) {\n self.__loadBeforeDeactiveStarted = false;\n if (self.__loadDeactivate) self.__loadDeactivate();\n }\n }\n },\n\n /**\n * Recomputes scroll minimum values based on client dimensions and content dimensions.\n */\n __computeScrollMax: function __computeScrollMax(zoomLevel) {\n var self = this;\n\n if (zoomLevel == null) {\n zoomLevel = self.__zoomLevel;\n }\n\n self.__maxScrollLeft = Math.max(self.__contentWidth * zoomLevel - self.__clientWidth, 0);\n self.__maxScrollTop = Math.max(self.__contentHeight * zoomLevel - self.__clientHeight, 0);\n },\n /** compute current page total page */\n __computePage: function __computePage() {\n var self = this;\n var clientWidth = self.__clientWidth;\n var clientHeight = self.__clientHeight;\n var left = self.__scrollLeft;\n var top = self.__scrollTop;\n self.__totalXPage = Math.ceil(self.__contentWidth / clientWidth);\n self.__currentPageX = Math.ceil(left / clientWidth + 1);\n self.__totalYPage = Math.ceil(self.__contentHeight / clientHeight);\n self.__currentPageY = Math.ceil(top / clientHeight + 1);\n },\n /** complete scroll*/\n __scrollComplete: function __scrollComplete() {\n var self = this;\n self.options.scrollingComplete();\n },\n /*\n ---------------------------------------------------------------------------\n ANIMATION (DECELERATION) SUPPORT\n ---------------------------------------------------------------------------\n */\n\n /**\n * Called when a touch sequence end and the speed of the finger was high enough\n * to switch into deceleration mode.\n */\n __startDeceleration: function __startDeceleration() {\n var self = this;\n\n if (self.options.paging) {\n var scrollLeft = Math.max(Math.min(self.__scrollLeft, self.__maxScrollLeft), 0);\n var scrollTop = Math.max(Math.min(self.__scrollTop, self.__maxScrollTop), 0);\n var clientWidth = self.__clientWidth;\n var clientHeight = self.__clientHeight;\n\n // We limit deceleration not to the min/max values of the allowed range, but to the size of the visible client area.\n // Each page should have exactly the size of the client area.\n self.__minDecelerationScrollLeft = Math.floor(scrollLeft / clientWidth) * clientWidth;\n self.__minDecelerationScrollTop = Math.floor(scrollTop / clientHeight) * clientHeight;\n self.__maxDecelerationScrollLeft = Math.ceil(scrollLeft / clientWidth) * clientWidth;\n self.__maxDecelerationScrollTop = Math.ceil(scrollTop / clientHeight) * clientHeight;\n } else {\n self.__minDecelerationScrollLeft = 0;\n self.__minDecelerationScrollTop = 0;\n self.__maxDecelerationScrollLeft = self.__maxScrollLeft;\n self.__maxDecelerationScrollTop = self.__maxScrollTop;\n }\n\n // Wrap class method\n var step = function step(percent, now, render) {\n self.__stepThroughDeceleration(render);\n };\n\n // How much velocity is required to keep the deceleration running\n var minVelocityToKeepDecelerating = self.options.snapping ? 4 : 0.001;\n\n // Detect whether it's still worth to continue animating steps\n // If we are already slow enough to not being user perceivable anymore, we stop the whole process here.\n var verify = function verify() {\n var shouldContinue = Math.abs(self.__decelerationVelocityX) >= minVelocityToKeepDecelerating || Math.abs(self.__decelerationVelocityY) >= minVelocityToKeepDecelerating;\n if (!shouldContinue) {\n self.__didDecelerationComplete = true;\n }\n return shouldContinue;\n };\n\n var completed = function completed() {\n if (!self.__isDecelerating) {\n return;\n }\n self.__isDecelerating = false;\n if (self.__didDecelerationComplete) {\n self.__scrollComplete();\n }\n\n // Animate to grid when snapping is active, otherwise just fix out-of-boundary positions\n self.scrollTo(self.__scrollLeft, self.__scrollTop, self.options.snapping);\n };\n\n // Start animation and switch on flag\n self.__isDecelerating = core.effect.Animate.start(step, verify, completed);\n },\n\n /**\n * Called on every step of the animation\n *\n * @param inMemory {Boolean?false} Whether to not render the current step, but keep it in memory only. Used internally only!\n */\n __stepThroughDeceleration: function __stepThroughDeceleration(render) {\n var self = this;\n var bouncing = self.options.bouncing;\n var minLeft = self.__minDecelerationScrollLeft;\n var maxLeft = self.__maxDecelerationScrollLeft;\n var minTop = self.__minDecelerationScrollTop;\n var maxTop = self.__maxDecelerationScrollTop;\n // Add deceleration to scroll position\n var scrollLeft = self.__scrollLeft + self.__decelerationVelocityX;\n var scrollTop = self.__scrollTop + self.__decelerationVelocityY;\n\n var bounceX = scrollLeft < minLeft || scrollLeft > maxLeft;\n var bounceY = scrollTop < minTop || scrollTop > maxTop;\n\n // fix scrollLeft and scrollTop\n var fixedScrollLeft = Math.min(Math.max(minLeft - bouncing.left, scrollLeft), maxLeft + bouncing.right);\n\n var fixedScrollTop = Math.min(Math.max(minTop - bouncing.top, scrollTop), maxTop + bouncing.bottom);\n\n //\n // UPDATE SCROLL POSITION\n //\n if (render) {\n self.__publish(fixedScrollLeft, fixedScrollTop, self.__zoomLevel);\n } else {\n self.__scrollLeft = scrollLeft;\n self.__scrollTop = scrollTop;\n }\n\n //\n // SLOW DOWN\n //\n\n // Slow down velocity on every iteration\n if (!self.options.paging) {\n // This is the factor applied to every iteration of the animation\n // to slow down the process. This should emulate natural behavior where\n // objects slow down when the initiator of the movement is removed\n var frictionFactor = 0.95;\n\n self.__decelerationVelocityX *= frictionFactor;\n self.__decelerationVelocityY *= frictionFactor;\n }\n\n //\n // BOUNCING SUPPORT\n //\n\n var scrollOutsideX = 0;\n var scrollOutsideY = 0;\n\n // This configures the amount of change applied to deceleration/acceleration when reaching boundaries\n var penetrationDeceleration = self.options.penetrationDeceleration;\n var penetrationAcceleration = self.options.penetrationAcceleration;\n\n if (bounceX) {\n // Check limits\n if (scrollLeft < self.__minDecelerationScrollLeft) {\n scrollOutsideX = self.__minDecelerationScrollLeft - scrollLeft;\n } else if (scrollLeft > self.__maxDecelerationScrollLeft) {\n scrollOutsideX = self.__maxDecelerationScrollLeft - scrollLeft;\n }\n }\n\n if (bounceY) {\n if (scrollTop < self.__minDecelerationScrollTop) {\n scrollOutsideY = self.__minDecelerationScrollTop - scrollTop;\n } else if (scrollTop > self.__maxDecelerationScrollTop) {\n scrollOutsideY = self.__maxDecelerationScrollTop - scrollTop;\n }\n }\n\n if (scrollOutsideX !== 0) {\n if (scrollOutsideX * self.__decelerationVelocityX <= 0) {\n self.__decelerationVelocityX += scrollOutsideX * penetrationDeceleration;\n if (scrollOutsideX < 0 && -scrollOutsideX >= bouncing.right && self.__decelerationVelocityX > 0) {\n self.__decelerationVelocityX = -bouncing.right / 2;\n }\n if (scrollOutsideX > 0 && scrollOutsideX >= bouncing.left && self.__decelerationVelocityX < 0) {\n self.__decelerationVelocityX = bouncing.left / 2;\n }\n } else {\n self.__decelerationVelocityX = scrollOutsideX * penetrationAcceleration;\n }\n }\n\n if (scrollOutsideY !== 0) {\n if (scrollOutsideY * self.__decelerationVelocityY <= 0) {\n self.__decelerationVelocityY += scrollOutsideY * penetrationDeceleration;\n if (scrollOutsideY < 0 && -scrollOutsideY >= bouncing.bottom && self.__decelerationVelocityY > 0) {\n self.__decelerationVelocityY = -bouncing.bottom / 2;\n }\n if (scrollOutsideY > 0 && scrollOutsideY >= bouncing.top && self.__decelerationVelocityY < 0) {\n self.__decelerationVelocityY = bouncing.top / 2;\n }\n } else {\n self.__decelerationVelocityY = scrollOutsideY * penetrationAcceleration / 2;\n }\n }\n }\n};\n\n// Copy over members to prototype\nfor (var key in members) {\n Scroller.prototype[key] = members[key];\n}\n\n/* DOM-based rendering (Uses 3D when available, falls back on margin when transform not available) */\nfunction render(content, global, suffix, type) {\n if (type == 'position') {\n return function (left, top) {\n content.style.left = -left + 'px';\n content.style.top = -top + 'px';\n };\n }\n\n var vendorPrefix = getPrefix(global);\n\n var helperElem = document.createElement('div');\n var undef;\n\n var perspectiveProperty = vendorPrefix + 'Perspective';\n var transformProperty = 'transform'; //vendorPrefix + 'Transform';\n\n if (helperElem.style[perspectiveProperty] !== undef) {\n return function (left, top, zoom) {\n content.style[transformProperty] = 'translate3d(' + -left + suffix + ',' + -top + suffix + ',0) scale(' + zoom + ')';\n };\n } else if (helperElem.style[transformProperty] !== undef) {\n return function (left, top, zoom) {\n content.style[transformProperty] = 'translate(' + -left + suffix + ',' + -top + suffix + ') scale(' + zoom + ')';\n };\n }\n}\n\nvar touch = new touchManager();\nfunction listenContainer(container, scroller, eventCallback, zooming, preventDefault, preventDefaultOnMove) {\n var destroy = null;\n var mousedown = false;\n var touchObj = touch.getTouchObject();\n\n function touchstart(e) {\n var event = touch.getEventObject(e);\n // Don't react if initial down happens on a form element\n if (event[0] && event[0].target && event[0].target.tagName.match(/input|textarea|select/i) || scroller.__disable) {\n return;\n }\n eventCallback('mousedown');\n mousedown = true;\n scroller.doTouchStart(event, e.timeStamp);\n\n if (preventDefault) {\n e.preventDefault();\n }\n e.stopPropagation();\n\n // here , we want to manully prevent default, so we\n // set passive to false\n // see https://developer.mozilla.org/zh-CN/docs/Web/API/EventTarget/addEventListener\n document.addEventListener(touchObj.touchmove, touchmove, {\n passive: false\n });\n }\n\n function touchmove(e) {\n if (scroller.__disable || !mousedown) return;\n\n var event = touch.getEventObject(e);\n eventCallback('mousemove');\n scroller.doTouchMove(event, e.timeStamp, e.scale);\n if (preventDefaultOnMove) {\n e.preventDefault();\n }\n }\n\n function touchend(e) {\n eventCallback('mouseup');\n mousedown = false;\n scroller.doTouchEnd(e.timeStamp);\n document.removeEventListener(touchObj.touchmove, touchmove);\n }\n function touchcancel(e) {\n scroller.doTouchEnd(e.timeStamp);\n }\n\n function zoomHandle(e) {\n scroller.doMouseZoom(e.detail ? e.detail * -120 : e.wheelDelta, e.timeStamp, e.pageX, e.pageY);\n }\n\n container.addEventListener(touchObj.touchstart, touchstart, false);\n\n document.addEventListener(touchObj.touchend, touchend, false);\n document.addEventListener(touchObj.touchcancel, touchcancel, false);\n\n if (zooming && !touch.isTouch) {\n container.addEventListener(navigator.userAgent.indexOf('Firefox') > -1 ? 'DOMMouseScroll' : 'mousewheel', zoomHandle, false);\n }\n\n destroy = function destroy() {\n container.removeEventListener(touchObj.touchstart, touchstart, false);\n\n document.removeEventListener(touchObj.touchend, touchend, false);\n document.removeEventListener(touchObj.touchcancel, touchcancel, false);\n\n container.removeEventListener(navigator.userAgent.indexOf('Firefox') > -1 ? 'DOMMouseScroll' : 'mousewheel', zoomHandle, false);\n };\n\n // handle __publish event\n scroller.onScroll = function () {\n eventCallback('onscroll');\n };\n return destroy;\n}\n\n/**\n * These mixes is exclusive for slide mode\n */\n\ncreateSlideModeStyle();\n/**\n * @description refresh and load callback\n */\nfunction createStateCallbacks(type, stageType, vm, tipDom) {\n var listeners = vm.$listeners;\n\n var activateCallback = function activateCallback() {\n vm.vuescroll.state[stageType] = 'active';\n vm.$emit(type + '-activate', vm, tipDom);\n };\n\n var deactivateCallback = function deactivateCallback() {\n vm.vuescroll.state[stageType] = 'deactive';\n vm.$emit(type + '-deactivate', vm, tipDom);\n };\n\n var beforeDeactiveEnd = function beforeDeactiveEnd() {\n vm.vuescroll.state[stageType] = 'beforeDeactiveEnd';\n vm.$emit(type + '-before-deactivate-end', vm, tipDom);\n };\n\n var startCallback = function startCallback() {\n vm.vuescroll.state[stageType] = 'start';\n setTimeout(function () {\n vm.scroller.finishRefreshOrLoad();\n }, 2000); // Default start stage duration\n };\n\n // let beforeDeactivateCallback = done => {\n // vm.vuescroll.state[stageType] = 'beforeDeactive';\n // setTimeout(function() {\n // done();\n // }, 500); // Default before-deactivated stage duration\n // };\n var beforeDeactivateCallback = void 0;\n\n /* istanbul ignore if */\n if (listeners[type + '-before-deactivate']) {\n beforeDeactivateCallback = function beforeDeactivateCallback(done) {\n vm.vuescroll.state[stageType] = 'beforeDeactive';\n vm.$emit(type + '-before-deactivate', vm, tipDom, done.bind(vm.scroller));\n };\n }\n\n /* istanbul ignore if */\n if (listeners[type + '-start']) {\n startCallback = function startCallback() {\n vm.vuescroll.state[stageType] = 'start';\n vm.$emit(type + '-start', vm, tipDom, vm.scroller.finishRefreshOrLoad.bind(vm.scroller));\n };\n }\n\n return {\n activateCallback: activateCallback,\n deactivateCallback: deactivateCallback,\n startCallback: startCallback,\n beforeDeactivateCallback: beforeDeactivateCallback,\n beforeDeactiveEnd: beforeDeactiveEnd\n };\n}\n\nvar slideMix = {\n mounted: function mounted() {\n this.vsMounted = true;\n },\n\n computed: {\n pullRefreshTip: function pullRefreshTip() {\n return this.mergedOptions.vuescroll.pullRefresh.tips[this.vuescroll.state.refreshStage];\n },\n pushLoadTip: function pushLoadTip() {\n return this.mergedOptions.vuescroll.pushLoad.tips[this.vuescroll.state.loadStage];\n },\n refreshLoad: function refreshLoad() {\n return this.mergedOptions.vuescroll.pullRefresh.enable || this.mergedOptions.vuescroll.pushLoad.enable;\n },\n refrehDomVisiable: function refrehDomVisiable() {\n return this.vsMounted && this.outTheTopBoundary;\n },\n loadDomVisiable: function loadDomVisiable() {\n return this.vsMounted && this.outTheBottomBoundary;\n }\n },\n data: function data() {\n return {\n vuescroll: {\n state: {\n /** Default tips of refresh and load */\n refreshStage: 'deactive',\n loadStage: 'deactive'\n }\n },\n vsMounted: false,\n outTheTopBoundary: false,\n outTheBottomBoundary: false\n };\n },\n\n methods: {\n // Update:\n // 1. update height/width\n // 2. update refresh or load\n updateScroller: function updateScroller() {\n this.updateDimesion();\n this.registryRefreshLoad();\n },\n updateDimesion: function updateDimesion() {\n var clientWidth = this.$el.clientWidth;\n var clientHeight = this.$el.clientHeight;\n var contentWidth = this.scrollPanelElm.scrollWidth;\n var contentHeight = this.scrollPanelElm.scrollHeight;\n var refreshHeight = 0;\n var loadHeight = 0;\n // If the refresh option is true,let's give a \"margin-top\" style to\n // the refresh-tip dom. let it to be invisible when doesn't trigger\n // refresh.\n if (this.mergedOptions.vuescroll.pullRefresh.enable) {\n if (this.vsMounted) {\n var refreshDom = this.$refs[__REFRESH_DOM_NAME].elm || this.$refs[__REFRESH_DOM_NAME];\n refreshHeight = refreshDom.offsetHeight;\n refreshDom.style.marginTop = -refreshHeight + 'px';\n }\n }\n if (this.mergedOptions.vuescroll.pushLoad.enable) {\n if (this.vsMounted) {\n var loadDom = this.$refs[__LOAD_DOM_NAME].elm || this.$refs[__LOAD_DOM_NAME];\n loadHeight = loadDom.offsetHeight;\n contentHeight -= loadHeight;\n loadDom.style.bottom = '-' + loadHeight + 'px';\n }\n }\n if (this.scroller) {\n this.scroller.setDimensions(clientWidth, clientHeight, contentWidth, contentHeight, false);\n }\n },\n registryRefreshLoad: function registryRefreshLoad() {\n // registry refresh\n if (this.mergedOptions.vuescroll.pullRefresh.enable) {\n this.registryEvent('refresh');\n }\n // registry load\n if (this.mergedOptions.vuescroll.pushLoad.enable) {\n this.registryEvent('load');\n }\n },\n registryScroller: function registryScroller() {\n var _this = this;\n\n var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},\n _ref$left = _ref.left,\n left = _ref$left === undefined ? 0 : _ref$left,\n _ref$top = _ref.top,\n top = _ref$top === undefined ? 0 : _ref$top,\n _ref$zoom = _ref.zoom,\n zoom = _ref$zoom === undefined ? 1 : _ref$zoom;\n\n var _mergedOptions$vuescr = this.mergedOptions.vuescroll.scroller,\n preventDefault = _mergedOptions$vuescr.preventDefault,\n preventDefaultOnMove = _mergedOptions$vuescr.preventDefaultOnMove;\n var _mergedOptions$vuescr2 = this.mergedOptions.vuescroll,\n paging = _mergedOptions$vuescr2.paging,\n snapping = _mergedOptions$vuescr2.snapping.enable,\n renderMethod = _mergedOptions$vuescr2.renderMethod,\n zooming = _mergedOptions$vuescr2.zooming,\n locking = _mergedOptions$vuescr2.locking;\n // disale zooming when refresh or load enabled\n\n zooming = !this.refreshLoad && !paging && !snapping && zooming;\n var _mergedOptions$scroll = this.mergedOptions.scrollPanel,\n scrollingY = _mergedOptions$scroll.scrollingY,\n scrollingX = _mergedOptions$scroll.scrollingX;\n\n\n var scrollingComplete = this.scrollingComplete.bind(this);\n\n // Initialize Scroller\n this.scroller = new Scroller(render(this.scrollPanelElm, window, 'px', renderMethod), _extends({}, this.mergedOptions.vuescroll.scroller, {\n zooming: zooming,\n scrollingY: scrollingY,\n scrollingX: scrollingX && !this.refreshLoad,\n animationDuration: this.mergedOptions.scrollPanel.speed,\n paging: paging,\n snapping: snapping,\n scrollingComplete: scrollingComplete,\n locking: locking\n }));\n\n this.scroller.__disable = this.mergedOptions.vuescroll.scroller.disable;\n this.scroller.__scrollLeft = left;\n this.scroller.__scrollTop = top;\n this.scroller.__zoomLevel = zoom;\n\n // Set snap\n if (snapping) {\n this.scroller.setSnapSize(this.mergedOptions.vuescroll.snapping.width, this.mergedOptions.vuescroll.snapping.height);\n }\n var rect = this.$el.getBoundingClientRect();\n this.scroller.setPosition(rect.left + this.$el.clientLeft, rect.top + this.$el.clientTop);\n\n // Get destroy callback\n var cb = listenContainer(this.$el, this.scroller, function (eventType) {\n // Thie is to dispatch the event from the scroller.\n // to let vuescroll refresh the dom\n switch (eventType) {\n case 'mousedown':\n _this.vuescroll.state.isDragging = true;\n break;\n case 'onscroll':\n {\n /**\n * Trigger auto load\n */\n var stage = _this.vuescroll.state['loadStage'];\n var _mergedOptions$vuescr3 = _this.mergedOptions.vuescroll.pushLoad,\n enable = _mergedOptions$vuescr3.enable,\n auto = _mergedOptions$vuescr3.auto,\n autoLoadDistance = _mergedOptions$vuescr3.autoLoadDistance;\n var _scroller = _this.scroller,\n __scrollTop = _scroller.__scrollTop,\n __maxScrollTop = _scroller.__maxScrollTop;\n\n if (stage != 'start' && enable && auto && !_this.lockAutoLoad && // auto load debounce\n autoLoadDistance >= __maxScrollTop - __scrollTop && __scrollTop > 0) {\n _this.lockAutoLoad = true;\n _this.triggerRefreshOrLoad('load');\n }\n\n if (autoLoadDistance < __maxScrollTop - __scrollTop) {\n _this.lockAutoLoad = false;\n }\n\n _this.handleScroll(false);\n }\n\n break;\n case 'mouseup':\n _this.vuescroll.state.isDragging = false;\n break;\n }\n }, zooming, preventDefault, preventDefaultOnMove);\n\n this.updateScroller();\n\n return cb;\n },\n updateSlideModeBarState: function updateSlideModeBarState() {\n // update slide mode scrollbars' state\n var heightPercentage = void 0,\n widthPercentage = void 0;\n var vuescroll = this.$el;\n var scroller = this.scroller;\n\n var outerLeft = 0;\n var outerTop = 0;\n\n var _$el = this.$el,\n clientWidth = _$el.clientWidth,\n clientHeight = _$el.clientHeight;\n\n\n var contentWidth = clientWidth + this.scroller.__maxScrollLeft;\n var contentHeight = clientHeight + this.scroller.__maxScrollTop;\n\n // We should add the the height or width that is\n // out of horizontal bountry to the total length\n\n /* istanbul ignore if */\n if (scroller.__scrollLeft < 0) {\n outerLeft = -scroller.__scrollLeft;\n } /* istanbul ignore next */else if (scroller.__scrollLeft > scroller.__maxScrollLeft) {\n outerLeft = scroller.__scrollLeft - scroller.__maxScrollLeft;\n }\n\n // out of vertical bountry\n if (scroller.__scrollTop < 0) {\n outerTop = -scroller.__scrollTop;\n this.outTheBottomBoundary = false;\n this.outTheTopBoundary = true;\n } else if (scroller.__scrollTop > scroller.__maxScrollTop) {\n outerTop = scroller.__scrollTop - scroller.__maxScrollTop;\n this.outTheTopBoundary = false;\n this.outTheBottomBoundary = true;\n } else {\n this.outTheTopBoundary = this.outTheBottomBoundary = false;\n }\n\n heightPercentage = clientHeight / (contentHeight + outerTop);\n widthPercentage = clientWidth / (contentWidth + outerLeft);\n\n var scrollTop = Math.min(Math.max(0, scroller.__scrollTop), scroller.__maxScrollTop);\n var scrollLeft = Math.min(Math.max(0, scroller.__scrollLeft), scroller.__maxScrollLeft);\n\n this.bar.vBar.state.posValue = (scrollTop + outerTop) * 100 / vuescroll.clientHeight;\n this.bar.hBar.state.posValue = (scrollLeft + outerLeft) * 100 / vuescroll.clientWidth;\n\n /* istanbul ignore if */\n if (scroller.__scrollLeft < 0) {\n this.bar.hBar.state.posValue = 0;\n }\n if (scroller.__scrollTop < 0) {\n this.bar.vBar.state.posValue = 0;\n }\n\n this.bar.vBar.state.size = heightPercentage < 1 ? heightPercentage : 0;\n this.bar.hBar.state.size = widthPercentage < 1 ? widthPercentage : 0;\n },\n registryEvent: function registryEvent(type) {\n var domName = type == 'refresh' ? __REFRESH_DOM_NAME : __LOAD_DOM_NAME;\n var activateFunc = type == 'refresh' ? this.scroller.activatePullToRefresh : this.scroller.activatePushToLoad;\n var stageType = type == 'refresh' ? 'refreshStage' : 'loadStage';\n var tipDom = this.$refs[domName].elm || this.$refs[domName];\n var cbs = createStateCallbacks(type, stageType, this, tipDom);\n var height = tipDom.offsetHeight;\n\n activateFunc.bind(this.scroller)(height, cbs);\n },\n getSlidePosition: function getSlidePosition() {\n return {\n scrollLeft: this.scroller.__scrollLeft,\n scrollTop: this.scroller.__scrollTop\n };\n }\n }\n};\n\n/**\n * These mixes is exclusive for native mode\n */\n\nvar nativeMix = {\n methods: {\n updateNativeModeBarState: function updateNativeModeBarState() {\n var container = this.scrollPanelElm;\n var isPercent = this.vuescroll.state.currentSizeStrategy == 'percent';\n var _vuescroll$state = this.vuescroll.state,\n width = _vuescroll$state.width,\n height = _vuescroll$state.height;\n\n var clientWidth = isPercent || !width ? container.clientWidth : width.slice(0, -2); // xxxpx ==> xxx\n var clientHeight = isPercent || !height ? container.clientHeight : height.slice(0, -2);\n\n var heightPercentage = clientHeight / container.scrollHeight;\n var widthPercentage = clientWidth / container.scrollWidth;\n\n this.bar.vBar.state.posValue = container.scrollTop * 100 / clientHeight;\n this.bar.hBar.state.posValue = container.scrollLeft * 100 / clientWidth;\n\n this.bar.vBar.state.size = heightPercentage < 1 ? heightPercentage : 0;\n this.bar.hBar.state.size = widthPercentage < 1 ? widthPercentage : 0;\n },\n getNativePosition: function getNativePosition() {\n return {\n scrollTop: this.scrollPanelElm.scrollTop,\n scrollLeft: this.scrollPanelElm.scrollLeft\n };\n },\n css: function css(dom, style) /* istanbul ignore next */{\n return window.getComputedStyle(dom)[style];\n },\n checkScrollable: function checkScrollable(e, deltaX, deltaY) /* istanbul ignore next */{\n var scrollable = false;\n\n // check mouse point scrollable.\n var dom = e.target ? e.target : e;\n while (dom && dom.nodeType == 1 && dom !== this.scrollPanelElm.parentNode && !/^BODY|HTML/.test(dom.nodeName)) {\n var ov = this.css(dom, 'overflow') || '';\n if (/scroll|auto/.test(ov)) {\n var _getScrollProcess = this.getScrollProcess(dom),\n v = _getScrollProcess.v,\n h = _getScrollProcess.h;\n\n var isScrollX = this.css(dom, 'overflowX') !== 'hidden';\n var isScrollY = this.css(dom, 'overflowY') !== 'hidden';\n if (isScrollX && (deltaX < 0 && h > 0 || deltaX > 0 && h < 1) || isScrollY && (deltaY < 0 && v > 0 || deltaY > 0 && v < 1)) {\n scrollable = dom == this.scrollPanelElm;\n break;\n }\n }\n dom = dom.parentNode ? dom.parentNode : false;\n }\n\n return scrollable;\n },\n onMouseWheel: function onMouseWheel(event) /* istanbul ignore next */{\n var _mergedOptions$vuescr = this.mergedOptions.vuescroll,\n isReverse = _mergedOptions$vuescr.wheelDirectionReverse,\n duration = _mergedOptions$vuescr.wheelScrollDuration,\n checkShiftKey = _mergedOptions$vuescr.checkShiftKey,\n locking = _mergedOptions$vuescr.locking;\n\n\n var deltaX = void 0;\n var deltaY = void 0;\n if (event.wheelDelta) {\n if (event.deltaY || event.deltaX) {\n deltaX = event.deltaX;\n deltaY = event.deltaY;\n if (locking) {\n if (Math.abs(event.deltaX) > Math.abs(event.deltaY)) {\n deltaY = 0;\n } else {\n deltaX = 0;\n }\n }\n } else {\n deltaX = 0;\n deltaY = -1 * event.wheelDelta / 2;\n }\n } else if (event.detail) {\n deltaY = deltaX = event.detail * 16;\n // horizontal scroll\n if (event.axis == 1) {\n deltaY = 0;\n } else if (event.axis == 2) {\n // vertical scroll\n deltaX = 0;\n }\n }\n\n if (checkShiftKey && event.shiftKey) {\n // swap value\n deltaX ^= deltaY;\n deltaY ^= deltaX;\n deltaX ^= deltaY;\n }\n\n if (isReverse) {\n deltaX ^= deltaY;\n deltaY ^= deltaX;\n deltaX ^= deltaY;\n }\n\n if (this.checkScrollable(event, deltaX, deltaY)) {\n event.stopPropagation();\n event.preventDefault();\n this.scrollBy({ dx: deltaX, dy: deltaY }, duration);\n }\n }\n },\n computed: {\n scrollContentElm: function scrollContentElm() {\n return this.$refs['scrollContent']._isVue ? this.$refs['scrollContent'].$el : this.$refs['scrollContent'];\n }\n }\n};\n\nvar update = [slideMix, nativeMix];\n\nvar mixins = [api$1].concat(toConsumableArray(update));\n\nvar core$1 = {\n mixins: mixins,\n mounted: function mounted() {\n if (!this._isDestroyed && !this.renderError) {\n if (this.mode == 'slide') {\n this.updatedCbs.push(this.updateScroller);\n }\n\n this.$watch('mergedOptions.vuescroll.scroller.disable', {\n sync: true,\n handler: function handler(newVal) {\n if (this.scroller) {\n this.scroller.__disable = newVal;\n }\n }\n });\n }\n },\n\n computed: {\n mode: function mode() {\n return this.mergedOptions.vuescroll.mode;\n }\n },\n methods: {\n destroy: function destroy() {\n if (this.destroyScroller) {\n this.scroller.stop();\n this.destroyScroller();\n this.destroyScroller = null;\n }\n\n /* istanbul ignore next */\n if (this.destroyResize) {\n this.destroyResize();\n }\n },\n handleScroll: function handleScroll(nativeEvent) {\n this.updateBarStateAndEmitEvent('handle-scroll', nativeEvent);\n },\n updateBarStateAndEmitEvent: function updateBarStateAndEmitEvent(eventType) {\n var nativeEvent = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;\n\n if (this.mode == 'native') {\n this.updateNativeModeBarState();\n } else if (this.mode == 'slide') {\n /* istanbul ignore if */\n if (!this.scroller) {\n return;\n }\n\n this.updateSlideModeBarState();\n }\n if (eventType) {\n this.emitEvent(eventType, nativeEvent);\n }\n if (this.mergedOptions.bar.onlyShowBarOnScroll) {\n if (eventType == 'handle-scroll' || eventType == 'handle-resize' || eventType == 'refresh-status' || eventType == 'window-resize' || eventType == 'options-change') {\n this.showAndDefferedHideBar(true /* forceHideBar: true */);\n }\n } else {\n this.showAndDefferedHideBar();\n }\n },\n getScrollProcess: function getScrollProcess() {\n var _scrollPanelElm = this.scrollPanelElm,\n scrollHeight = _scrollPanelElm.scrollHeight,\n scrollWidth = _scrollPanelElm.scrollWidth,\n clientHeight = _scrollPanelElm.clientHeight,\n clientWidth = _scrollPanelElm.clientWidth,\n scrollTop = _scrollPanelElm.scrollTop,\n scrollLeft = _scrollPanelElm.scrollLeft;\n\n\n if (this.mode == 'slide') {\n scrollHeight = this.scroller.__contentHeight;\n scrollWidth = this.scroller.__contentWidth;\n scrollTop = this.scroller.__scrollTop;\n scrollLeft = this.scroller.__scrollLeft;\n clientHeight = this.$el.clientHeight;\n clientWidth = this.$el.clientWidth;\n }\n\n var v = Math.min(scrollTop / (scrollHeight - clientHeight || 1), 1);\n var h = Math.min(scrollLeft / (scrollWidth - clientWidth || 1), 1);\n\n return {\n v: v,\n h: h\n };\n },\n emitEvent: function emitEvent(eventType) {\n var nativeEvent = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;\n var _scrollPanelElm2 = this.scrollPanelElm,\n scrollTop = _scrollPanelElm2.scrollTop,\n scrollLeft = _scrollPanelElm2.scrollLeft;\n\n\n var vertical = {\n type: 'vertical'\n };\n var horizontal = {\n type: 'horizontal'\n };\n\n var _getScrollProcess = this.getScrollProcess(),\n v = _getScrollProcess.v,\n h = _getScrollProcess.h;\n\n vertical['process'] = v;\n horizontal['process'] = h;\n\n vertical['barSize'] = this.bar.vBar.state.size;\n horizontal['barSize'] = this.bar.hBar.state.size;\n vertical['scrollTop'] = scrollTop;\n horizontal['scrollLeft'] = scrollLeft;\n\n this.$emit(eventType, vertical, horizontal, nativeEvent);\n },\n initVariables: function initVariables() {\n this.lastMode = this.mode;\n this.$el._isVuescroll = true;\n },\n refreshMode: function refreshMode() {\n var initPos = void 0;\n if (this.scroller) {\n initPos = this.scroller.getValues();\n }\n\n if (this.destroyScroller) {\n this.scroller.stop();\n this.destroyScroller();\n this.destroyScroller = null;\n }\n\n if (this.mode == 'slide') {\n this.destroyScroller = this.registryScroller(initPos);\n } else if (this.mode == 'native') {\n // remove the legacy transform style attribute\n this.scrollPanelElm.style.transform = '';\n this.scrollPanelElm.style.transformOrigin = '';\n }\n },\n refreshInternalStatus: function refreshInternalStatus() {\n // 1.set vuescroll height or width according to\n // sizeStrategy\n this.setVsSize();\n // 2. registry resize event\n this.registryResize();\n // 3. registry scroller if mode is 'slide'\n // or remove 'transform origin' is the mode is not `slide`\n this.refreshMode();\n // 4. update scrollbar's height/width\n this.updateBarStateAndEmitEvent('refresh-status');\n },\n registryResize: function registryResize() {\n var _this = this;\n\n var resizeEnable = this.mergedOptions.vuescroll.detectResize;\n var modeChanged = false;\n\n if (this.lastMode != this.mode) {\n modeChanged = true;\n this.lastMode = this.mode;\n }\n\n /* istanbul ignore next */\n if (this.destroyResize && resizeEnable && !modeChanged) {\n return;\n }\n\n if (this.destroyResize) {\n this.destroyResize();\n }\n\n if (!resizeEnable) {\n return;\n }\n\n var contentElm = null;\n if (this.mode == 'slide') {\n contentElm = this.scrollPanelElm;\n } else if (this.mode == 'native') {\n // scrollContent maybe a vue-component or a pure-dom\n contentElm = this.scrollContentElm;\n }\n\n var vm = this;\n var handleWindowResize = function handleWindowResize() /* istanbul ignore next */{\n vm.updateBarStateAndEmitEvent('window-resize');\n if (vm.mode == 'slide') {\n vm.updatedCbs.push(vm.updateScroller);\n vm.$forceUpdate();\n }\n };\n\n var handleDomResize = function handleDomResize() {\n var currentSize = {};\n if (_this.mode == 'slide') {\n currentSize['width'] = _this.scroller.__contentWidth;\n currentSize['height'] = _this.scroller.__contentHeight;\n _this.updateBarStateAndEmitEvent('handle-resize', currentSize);\n // update scroller should after rendering\n _this.updatedCbs.push(_this.updateScroller);\n _this.$forceUpdate();\n } else if (_this.mode == 'native') {\n currentSize['width'] = _this.scrollPanelElm.scrollWidth;\n currentSize['height'] = _this.scrollPanelElm.scrollHeight;\n _this.updateBarStateAndEmitEvent('handle-resize', currentSize);\n }\n\n // Since content sie changes, we should tell parent to set\n // correct size to fit content's size\n _this.setVsSize();\n };\n window.addEventListener('resize', handleWindowResize, false);\n\n var destroyDomResize = installResizeDetection(contentElm, handleDomResize);\n\n var destroyWindowResize = function destroyWindowResize() {\n window.removeEventListener('resize', handleWindowResize, false);\n };\n\n this.destroyResize = function () {\n destroyWindowResize();\n destroyDomResize();\n\n _this.destroyResize = null;\n };\n },\n getPosition: function getPosition() {\n if (this.mode == 'slide') {\n return this.getSlidePosition();\n } else if (this.mode == 'native') {\n return this.getNativePosition();\n }\n }\n }\n};\n\n/**\n * The slide mode config\n */\nvar config = {\n // vuescroll\n vuescroll: {\n // position or transform\n renderMethod: 'transform',\n // pullRefresh or pushLoad is only for the slide mode...\n pullRefresh: {\n enable: false,\n tips: {\n deactive: 'Pull to Refresh',\n active: 'Release to Refresh',\n start: 'Refreshing...',\n beforeDeactive: 'Refresh Successfully!'\n }\n },\n pushLoad: {\n enable: false,\n tips: {\n deactive: 'Push to Load',\n active: 'Release to Load',\n start: 'Loading...',\n beforeDeactive: 'Load Successfully!'\n },\n auto: false,\n autoLoadDistance: 0\n },\n paging: false,\n zooming: true,\n snapping: {\n enable: false,\n width: 100,\n height: 100\n },\n /* some scroller options */\n scroller: {\n /** Enable bouncing (content can be slowly moved outside and jumps back after releasing) */\n bouncing: {\n top: 100,\n bottom: 100,\n left: 100,\n right: 100\n },\n /** Minimum zoom level */\n minZoom: 0.5,\n /** Maximum zoom level */\n maxZoom: 3,\n /** Multiply or decrease scrolling speed **/\n speedMultiplier: 1,\n /** This configures the amount of change applied to deceleration when reaching boundaries **/\n penetrationDeceleration: 0.03,\n /** This configures the amount of change applied to acceleration when reaching boundaries **/\n penetrationAcceleration: 0.08,\n /** Whether call e.preventDefault event when sliding the content or not */\n preventDefault: false,\n /** Whether call preventDefault when (mouse/touch)move*/\n preventDefaultOnMove: true,\n disable: false\n }\n }\n};\n/**\n * validate the options\n * @export\n * @param {any} ops\n */\nfunction configValidator(ops) {\n var renderError = false;\n var vuescroll = ops.vuescroll;\n\n // validate pushLoad, pullReresh, snapping\n\n if (vuescroll.paging == vuescroll.snapping.enable && vuescroll.paging && (vuescroll.pullRefresh || vuescroll.pushLoad)) {\n error('paging, snapping, (pullRefresh with pushLoad) can only one of them to be true.');\n }\n\n return renderError;\n}\n\nvar config$1 = {\n vuescroll: {\n wheelScrollDuration: 0,\n wheelDirectionReverse: false,\n checkShiftKey: true\n }\n};\n\nvar config$2 = {\n // vuescroll\n vuescroll: {\n mode: 'native'\n }\n};\n/**\n * validate the options\n * @export\n * @param {any} ops\n */\nfunction configValidator$1(ops) {\n var renderError = false;\n var vuescroll = ops.vuescroll;\n\n // validate modes\n\n if (!~modes.indexOf(vuescroll.mode)) {\n error('Unknown mode: ' + vuescroll.mode + ',the vuescroll\\'s option \"mode\" should be one of the ' + modes);\n renderError = true;\n }\n\n return renderError;\n}\n\nvar configs = [config$2, config, config$1];\nvar configValidators = [configValidator$1, configValidator];\n\nvar component = _install(core$1, createPanel$2, configs, configValidators);\n\nfunction install(Vue$$1) {\n var opts = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};\n\n Vue$$1.component(opts.name || component.name, component);\n Vue$$1.prototype.$vuescrollConfig = opts.ops || {};\n}\n\nvar Vuescroll = _extends({\n install: install,\n version: '4.17.4',\n refreshAll: refreshAll,\n scrollTo: scrollTo\n}, component);\n\n/* istanbul ignore if */\nif (typeof window !== 'undefined' && window.Vue) {\n window.Vue.use(Vuescroll);\n}\n\nreturn Vuescroll;\n\n})));\n","var render = function render(){var _vm=this,_c=_vm._self._c;return _c('div',{staticClass:\"detail\"},[(_vm.$store.state.isVertical)?[_c('div',{staticClass:\"container\",style:({\n width: _vm.$store.state.vw,\n height: _vm.$store.state.vh,\n })},[_c('div',{staticClass:\"content\"},[_c('img',{attrs:{\"src\":_vm.picSrc,\"alt\":\"\"}})])])]:[_c('vuescroll',{ref:\"scroll\",staticClass:\"container\",attrs:{\"ops\":_vm.ops}},[_c('div',{staticClass:\"content\"},[_c('img',{attrs:{\"src\":_vm.picSrc,\"alt\":\"\"}})])])],_c('div',{staticClass:\"back\",on:{\"click\":_vm.backClickHandler}})],2)\n}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","\n