Горизонтальная прокрутка действие для вертикальной построенной страницы

Question

я построил свой собственный веб-страницы на основе той же концепции, как эта демо: https://ihatetomatoes.net/demos/full-screen-layout-with-skrollr/

Проблема в том, когда неопытные пользователи просматривают на своих мобильных устройств. Они сразу же пытаются прокручивать по горизонтали в середине страницы. Мое намерение - включить горизонтальную прокрутку как бы вертикальную. Это будет означать, что «прокрутка» прямо на iPad будет равна вертикальной прокрутке вниз. В дополнение к обычной вертикальной прокрутке.

Есть ли функция jquery, чтобы включить это?

Answer 1

Я сомневаюсь, что ваш дизайн юзабилити является лучшим, потому что поведение «неопытных» пользователей может быть просто обычным пользователем, чтобы взаимодействовать с приложением/веб-страницей. Необычные анимации могут выглядеть круто, но могут отвлекаться от контента и путать людей.

В случае, если вы хотите попробовать его в любом случае, вот что я придумал:

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

Если прокрутка событие происходит, он проверяет, является ли она была горизонтальной. Если это так, запускается нисходящая анимация. Функция обратного вызова существует, так что никакие дальнейшие анимации не запускаются, а при этом анимируются (в противном случае она блокирует вертикальную прокрутку).

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