Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Allow vertical scrolling on a horizontal iScroll (touch only)
var point, pointStartX, pointStartY, deltaX, deltaY;
var scroller = new iScroll('scrollerId', {
vScroll: false,
vScrollbar: false,
hScrollbar: false,
snap: 'li',
momentum: false,
onBeforeScrollStart: function(e) {
point = e.touches[0];
pointStartX = point.pageX;
pointStartY = point.pageY;
null;
},
onBeforeScrollMove: function(e) {
deltaX = Math.abs(point.pageX - pointStartX);
deltaY = Math.abs(point.pageY - pointStartY);
if (deltaX >= deltaY) {
e.preventDefault();
} else {
null;
}
}
});
@agaase

This comment has been minimized.

Copy link

@agaase agaase commented Oct 9, 2013

This is wonderful. Works!!

@gnanasuriyan

This comment has been minimized.

Copy link

@gnanasuriyan gnanasuriyan commented Oct 9, 2013

Thanks. This solution helped me to resolve lot of problems related snapping.

@pabloweinx

This comment has been minimized.

Copy link

@pabloweinx pabloweinx commented May 5, 2014

Hi, my friends.

Could you share with me an aproximation adapted to iScroll 5? My problem is "scroll" event doesn't allow to receive the "e" param, and with the renamed event "beforeScrollStart", I can't determine the real direction because in this event these values are always 0,0.
I can get the real direction only on "scroll" and "scrollEnd" events, but I can't stop the propagation or prevent the default behaviour of the scrolling, so when my finger try to move the page in vertical direction, as It's formed of various iScrollers, I only get by clicking on a non-iScolll zone.

Thanks so much!

@bilelz

This comment has been minimized.

Copy link

@bilelz bilelz commented May 8, 2014

hello
i found a native solution to allow vertical scroll with iScroll 5 : http://lab.cubiq.org/iscroll5/demos/event-passthrough/
source code :

myScroll = new IScroll('#wrapper', { eventPassthrough: true, scrollX: true, scrollY: false, preventDefault: false });

from : http://cubiq.org/iscroll-5-ready-for-beta-test

@MattOpen

This comment has been minimized.

Copy link

@MattOpen MattOpen commented Aug 6, 2014

@bilelz, works great in V.5
Thank you

@igolka97

This comment has been minimized.

Copy link

@igolka97 igolka97 commented Jul 28, 2015

@bilelz Thanks!!! Works great with 5.0

@mzammouri

This comment has been minimized.

Copy link

@mzammouri mzammouri commented Nov 3, 2015

@bilelz Thanks

@huanggm

This comment has been minimized.

Copy link

@huanggm huanggm commented Mar 23, 2016

@bilelz Thanks! Save me a lot time!

@cuonghuynh

This comment has been minimized.

Copy link

@cuonghuynh cuonghuynh commented Jul 29, 2016

@bilelz Thank you so much

@cynosure7

This comment has been minimized.

Copy link

@cynosure7 cynosure7 commented Sep 5, 2016

@bilelz Thanks, works fine.

@bzin

This comment has been minimized.

Copy link

@bzin bzin commented Sep 26, 2016

Awesome stuff! Thanks @bilelz

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.