Question

我基于与此演示相同的概念构建了自己的网页：https://ihatetomatoes.net/demos/full-screen-layout-with-skrollr/

问题在于没有经验的用户浏览他们的移动设备。他们立即尝试在页面中间水平滚动。我的目的是启用水平滚动，因为它也是垂直的。那就是在iPad上解释“滚动”就等于垂直向下滚动。除了正常的垂直滚动。

是否有任何jquery函数可以启用它？

Answer 1

我怀疑您的可用性设计是最好的，因为“没有经验”的用户的行为可能只是普通用户与app /网页交互的方式。花哨的动画可能看起来很酷，但可能会分散内容并使人们感到困惑。

如果你想尝试一下，这就是我想出的：

$(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

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

1 个答案: