Horizontal iScrolling with Native Vertical Scrolling

[fresheyeball]

I know I cannot be the only one who has wanted to do this. And after many failures I got it figured out:

(using iScoll lite 4.1.6)

comment out the preventDefault on line 77

add this:

if( Math.sqrt( deltaX*deltaX ) > 3 ){e.preventDefault();}

to line 75 just below 'timestamp = e.timeStamp || Date.now();'

Hope that helps someone out there. I would love to see 'allow native scrolling' in one direction become an option in iScroll.

Cheers!

[lem]

Hi. Thanks for this posting.  I have the same problem except that i'd like to iscroll vertically and to scroll horizontally natively. I tried with scroll-lite and your changes but couldn't get it to work.

I tried by changing deltaX*deltaX to deltaY*deltaY, but with no effect. Could you give me a hint of what to change to make it work? 

Thank you.

Cheers

lem

[Daniel Worthy]

Thanks for this. Ran into an issue where we were using iScroll for a rotator and were having vertical scroll issues. 

In iScroll v4.1.9 the prevent default to comment out is near line 100 for the onBeforeScrollStart callback.

The timestamp is near line 392 in the _move function.

[Tom]

Thanks for sharing. Agreed, it would be good to see this as an option.

I can go to sleep happy now :)

[Terri Swallow]

It doesn't need to be an option since you can override that default method when you define your iScroll region

var iconScroll = new iScroll('iconScroll3', {

snap: true,

momentum: false,

onScrollEnd: function () {

},

onBeforeScrollStart: function (e) { return true; }

});

Now no modification or commenting out to the source iscroll.js library is required

Terri

[Manmade]

Hi All

Im using the swipeview script and I have managed to get it to scroll vertically and swipe horizontally, but if you scroll down and swipe to the next slide, then that slide is scrolled down.

So I added scrollTo(0,0); but then it jumps to the top...not starting from the top?

So I wonder if anybody have done this on the swipview script aswell as the iscroll?

Thanks.

[Zach Mathew]

I've made a small patch to iscroll to fix this issue. It supports both horizontal and vertical native scrolling.

Here's the pull request that contains the patch.
https://github.com/cubiq/iscroll/pull/220

Alternatively you can grab the patched version of iscroll from my forked branch:
https://github.com/zmathew/iscroll/tree/native-actions-support

[Christofer Bodin]

Confirmed that Zach Mathew's fix is working. Tested in iPhone, Android and the iPhone simulator.

Thanks, you saved my day!

[Ole Prinds]

Zach Mathew's patch works for me too.. Tested in Ipad and iphone simulator..

[Cosmin Nicolae Vacaroiu]

Worked for me too.

[Vũ Bảo Đại]

This patch work perfectly on android 4.1.2 but 2.2 is not, can you help me?

Vào 03:31:09 UTC+7 Thứ bảy, ngày 02 tháng sáu năm 2012, Zach Mathew đã viết:

[Matteo Spinelli]

Please review event passthrough demo in iScroll 5.

Matteo

[Kim Hansen]

Matteo:

iscroll-probe 5.1.2. I followed the demo "pretty much" to the letter and while I'll shortly take the demo and add a second page, my problem is that I have a JQM page in the 'single page' model where subsequent pages are navigated via their page id. 

My home page holds a generic horizontal scroller that works just fine... the home page doesn't need to scroll vertically. However, when I navigate to another page, native vertical scrolling on that and all subsequent pages is disabled. Navigation happens via <a hfre="#pageIDOfTargetPage</a> (menu bars) and if you poke the scroller I use the iscroll emitted event to navigate with window.location.href = #pageIDofTheTargetPage. Both navigation methods result in no native vertical scrolling on any subsequent page.

I've tried destroying the iscroll when the home page is hidden (bound to the onPageHide event) but that doesn't allow the other pages to vScroll. Interestingly, native vScroll works just fine -until- the iscroller is initialized, once it comes into existance it behaves as if iscroll is forever swallowing the native touchmove event. I have confirmed that the touchmove event is fired on subsequent pages but nothing happens.

I initialize the scroller thusly:

        gPosterPictureScroller = new IScroll('#scrollerPageWrapper', {
            snap: 'li',
            tap: 'posterPictureScrollerWasTapped',
            momentum: false,
            eventPassthrough: true,
            scrollX: true,
            scrollY: false,
            preventDefault: false,
            scrollbars: false
        });

Is iscroll hanging onto something?

Thanks

Kim

[Kim Hansen]

I forgot an important thing! This is for a Cordova app, vScrolling works fine in Chrome... my problem is observed across all devices I have tested: GSIII (ICS and JB), GS IV, Sony Experia, iPhones 4 and 5s, Kindle HDX, HTC One S and various iPads. I'm not confident it's device or OS dependent.

On Wednesday, August 6, 2014 8:46:55 PM UTC-7, Kim Hansen wrote:

Matteo:

iscroll-probe 5.1.2. I followed the demo "pretty much" to the letter and while I'll shortly take the demo and add a second page, my problem is that I have a JQM page in the 'single file' model where all pages are in a mondo HTML file and subsequent pages are navigated via their page id. 

[Kim Hansen]

<redFace>

Humble apologies all... it was me. iscroll is fine!

For reasons unknown, in my method that initialized the scroller I also had included a $(document) listener for 'touchmove' which in turn prevented default... it was myself that was swallowing the events.

</redFace>

On Wednesday, August 6, 2014 8:46:55 PM UTC-7, Kim Hansen wrote: