Horizontales Scrollen Akt für vertikale gebaut Seite

Question

ich meine eigene Webseite aufgebaut haben, basiert auf dem gleichen Konzept wie dieses Beispiel: https://ihatetomatoes.net/demos/full-screen-layout-with-skrollr/

Das Problem ist, wenn unerfahrene Benutzer auf ihren mobilen Einheiten zu sehen. Sie versuchen sofort horizontal in der Mitte der Seite zu scrollen. Meine Absicht ist horizontales Scrollen sozusagen vertikal zu ermöglichen. Das wäre zu interpretieren "scrollen" direkt auf einem iPad wäre gleich zu vertikalen Scrollen nach unten. Zusätzlich zum normalen vertikalen Scrollen.

Gibt es eine jquery-Funktion, um dies zu ermöglichen?

Answer 1

Ich bezweifle, dass Ihr Usability-Design das Beste ist, denn das Verhalten von "unerfahrenen" Benutzern könnte einfach die Art sein, wie normale Benutzer mit einer App/Webseite interagieren. Fantastische Animationen sehen zwar cool aus, können aber vom Inhalt ablenken und Leute verwirren.

Falls Sie es trotzdem versuchen, hier ist, was ich kam mit:

$(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); 
    } 
}); 

Wenn ein Scroll-Ereignis eintritt, überprüft er, ob es horizontal war. Wenn dies der Fall ist, wird eine Abwärtsanimation ausgelöst. Callback-Funktion ist da, so dass keine weiteren Animationen ausgelöst werden, während noch animiert wird (sonst würde es das vertikale Scrollen blockieren).

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