diff --git a/js/angular/directive/scroll.js b/js/angular/directive/scroll.js index 88c1150295..c349bce41d 100644 --- a/js/angular/directive/scroll.js +++ b/js/angular/directive/scroll.js @@ -98,7 +98,8 @@ function($timeout, $controller, $ionicBind) { scrollingY: $scope.direction.indexOf('y') >= 0, zooming: $scope.$eval($scope.zooming) === true, maxZoom: $scope.$eval($scope.maxZoom) || 3, - minZoom: $scope.$eval($scope.minZoom) || 0.5 + minZoom: $scope.$eval($scope.minZoom) || 0.5, + preventDefault: true }; if (isPaging) { scrollViewOptions.speedMultiplier = 0.8; diff --git a/js/views/scrollView.js b/js/views/scrollView.js index 2ec294126b..9632fd53dd 100644 --- a/js/views/scrollView.js +++ b/js/views/scrollView.js @@ -354,6 +354,9 @@ ionic.views.Scroll = ionic.views.View.inherit({ deceleration: 0.97, + /** Whether to prevent default on a scroll operation to capture drag events **/ + preventDefault: false, + /** Callback that is fired on the later of touch end or deceleration end, provided that another scrolling action has not begun. Used to know when to fade out a scrollbar. */ @@ -734,7 +737,7 @@ ionic.views.Scroll = ionic.views.View.inherit({ self.touchMove = function(e) { if (!self.__isDown || - e.defaultPrevented || + (!self.__isDown && e.defaultPrevented) || (e.target.tagName === 'TEXTAREA' && e.target.parentElement.querySelector(':focus')) ) { return; } @@ -773,6 +776,12 @@ ionic.views.Scroll = ionic.views.View.inherit({ self.__isDown = true; }; + self.touchMoveBubble = function(e) { + if(self.__isDown && self.options.preventDefault) { + e.preventDefault(); + } + }; + self.touchEnd = function(e) { if (!self.__isDown) return; @@ -790,6 +799,7 @@ ionic.views.Scroll = ionic.views.View.inherit({ if ('ontouchstart' in window) { // Touch Events container.addEventListener("touchstart", self.touchStart, false); + if(self.options.preventDefault) container.addEventListener("touchmove", self.touchMoveBubble, false); document.addEventListener("touchmove", self.touchMove, false); document.addEventListener("touchend", self.touchEnd, false); document.addEventListener("touchcancel", self.touchEnd, false); @@ -797,6 +807,7 @@ ionic.views.Scroll = ionic.views.View.inherit({ } else if (window.navigator.pointerEnabled) { // Pointer Events container.addEventListener("pointerdown", self.touchStart, false); + if(self.options.preventDefault) container.addEventListener("pointermove", self.touchMoveBubble, false); document.addEventListener("pointermove", self.touchMove, false); document.addEventListener("pointerup", self.touchEnd, false); document.addEventListener("pointercancel", self.touchEnd, false); @@ -804,6 +815,7 @@ ionic.views.Scroll = ionic.views.View.inherit({ } else if (window.navigator.msPointerEnabled) { // IE10, WP8 (Pointer Events) container.addEventListener("MSPointerDown", self.touchStart, false); + if(self.options.preventDefault) container.addEventListener("MSPointerMove", self.touchMoveBubble, false); document.addEventListener("MSPointerMove", self.touchMove, false); document.addEventListener("MSPointerUp", self.touchEnd, false); document.addEventListener("MSPointerCancel", self.touchEnd, false); @@ -825,7 +837,7 @@ ionic.views.Scroll = ionic.views.View.inherit({ }; self.mouseMove = function(e) { - if (!mousedown || e.defaultPrevented) { + if (!mousedown || (!mousedown && e.defaultPrevented)) { return; } @@ -834,6 +846,12 @@ ionic.views.Scroll = ionic.views.View.inherit({ mousedown = true; }; + self.mouseMoveBubble = function(e) { + if (mousedown && self.options.preventDefault) { + e.preventDefault(); + } + }; + self.mouseUp = function(e) { if (!mousedown) { return; @@ -863,6 +881,7 @@ ionic.views.Scroll = ionic.views.View.inherit({ }); container.addEventListener("mousedown", self.mouseDown, false); + if(self.options.preventDefault) container.addEventListener("mousemove", self.mouseMoveBubble, false); document.addEventListener("mousemove", self.mouseMove, false); document.addEventListener("mouseup", self.mouseUp, false); document.addEventListener('mousewheel', self.mouseWheel, false); @@ -875,21 +894,25 @@ ionic.views.Scroll = ionic.views.View.inherit({ var container = self.__container; container.removeEventListener('touchstart', self.touchStart); + container.removeEventListener('touchmove', self.touchMoveBubble); document.removeEventListener('touchmove', self.touchMove); document.removeEventListener('touchend', self.touchEnd); document.removeEventListener('touchcancel', self.touchCancel); container.removeEventListener("pointerdown", self.touchStart); + container.removeEventListener("pointermove", self.touchMoveBubble); document.removeEventListener("pointermove", self.touchMove); document.removeEventListener("pointerup", self.touchEnd); document.removeEventListener("pointercancel", self.touchEnd); container.removeEventListener("MSPointerDown", self.touchStart); + container.removeEventListener("MSPointerMove", self.touchMoveBubble); document.removeEventListener("MSPointerMove", self.touchMove); document.removeEventListener("MSPointerUp", self.touchEnd); document.removeEventListener("MSPointerCancel", self.touchEnd); container.removeEventListener("mousedown", self.mouseDown); + container.removeEventListener("mousemove", self.mouseMoveBubble); document.removeEventListener("mousemove", self.mouseMove); document.removeEventListener("mouseup", self.mouseUp); document.removeEventListener('mousewheel', self.mouseWheel);