水平滚动用于垂直构建的页面

Question

我已经建立了自己的网页基于相同的概念作为这个演示:https://ihatetomatoes.net/demos/full-screen-layout-with-skrollr/

问题是当没有经验的用户在他们的移动设备上浏览。他们会立即尝试在页面中间水平滚动。我的目的是使水平滚动，因为它是垂直以及。也就是说，iPad上的"滚动"等于垂直向下滚动。除了正常的垂直滚动。

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