2

I have built my own web page based on the same concept as this demo: https://ihatetomatoes.net/demos/full-screen-layout-with-skrollr/

The problem is when inexperienced users browse on their mobile units. They immediately try to scroll horizontally mid way through the page. My intention is to enable horizontal scrolling as it were vertical as well. That would be to interpret "scrolling" right on an iPad would be equal to vertical scrolling downward. In addition to normal vertical scrolling.

Is there any jquery function to enable this ?

Adrianni
  • 21
  • 2

1 Answers1

0

I doubt your usability design is the best, because the behaviour of 'inexperienced' users might just be the way normal users are used to interact with an app/webpage. Fancy animations might look cool, but could distract from the content and confuse people.

In case you want to try it anyway, here is what i came up with:

$(window).scroll(function() {
    var currPos = $(document).scrollLeft();

    var callback = function() {
        animationComplete = true;
    }

    if (lastPos < currPos && animationComplete) {
        animationComplete = false;
        console.log('scroll right');
        $('body, html').animate({scrollTop: 200}, callback);
    }
});

If a scrolling event happens, it checks if it was horizontal. If that is the case, a downward animation is triggered. Callback function is there so that no further animations are triggered, while still animating (otherwise it would block the vertical scrolling).

http://codepen.io/TobiObeck/pen/jrKBQw

Tobi Obeck
  • 1,918
  • 1
  • 19
  • 31
  • Not functioning as hoped. It does not scroll downwards when "scrolling" right on an iPad. Any other ideas? Thanks though. – Adrianni Oct 13 '16 at 19:13
  • Does it even trigger the scroll event? I searched for 'detect scrolling on ipad' and found a SO post http://stackoverflow.com/questions/18753367/jquery-live-scroll-event-on-mobile-work-around Maybe the touchmove event will work. They also mention something called iScroll – Tobi Obeck Oct 13 '16 at 20:36