Skip to content

Instantly share code, notes, and snippets.

@mattrothenberg

mattrothenberg/scrollFix.js

Created July 15, 2015 20:27
Show Gist options
  • Save mattrothenberg/090f93f16d49ce4c0389 to your computer and use it in GitHub Desktop.
Save mattrothenberg/090f93f16d49ce4c0389 to your computer and use it in GitHub Desktop.
Download ZIP
Ionic Framework - Bidirectional Scroll Fix
Raw
scrollFix.js
function fixScroll(handleName) {
$timeout(function(){
var sv = $ionicScrollDelegate.$getByHandle(handleName).getScrollView();
var container = sv.__container;
var originaltouchStart = sv.touchStart;
var originalmouseDown = sv.mouseDown;
var originaltouchMove = sv.touchMove;
var originalmouseMove = sv.mouseMove;
container.removeEventListener('touchstart', sv.touchStart);
container.removeEventListener('mousedown', sv.mouseDown);
document.removeEventListener('touchmove', sv.touchMove);
document.removeEventListener('mousemove', sv.mousemove);
sv.touchStart = function(e) {
e.preventDefault = function(){}
originaltouchStart.apply(sv, [e]);
}
sv.touchMove = function(e) {
e.preventDefault = function(){}
originaltouchMove.apply(sv, [e]);
}
sv.mouseDown = function(e) {
e.preventDefault = function(){}
originalmouseDown.apply(sv, [e]);
}
sv.mouseMove = function(e) {
e.preventDefault = function(){}
originalmouseMove.apply(sv, [e]);
}
container.addEventListener("touchstart", sv.touchStart, false);
container.addEventListener("mousedown", sv.mouseDown, false);
document.addEventListener("touchmove", sv.touchMove, false);
document.addEventListener("mousemove", sv.mouseMove, false);
})
}
@mattrothenberg
Copy link
Author

Add the following delegate-handle parameter to your <ion-scroll> element that is limited to horizontal scrolling only.

<ion-scroll direction="x" zooming="false" delegate-handle="horizontal">

Then, call the fixScroll() function, passing "horizontal" as the main parameter.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment