【问题标题】:Horizontal scrolling act for vertical built page垂直构建页面的水平滚动行为
【发布时间】:2016-10-12 19:10:38
【问题描述】:

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

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

是否有任何 jquery 功能可以启用此功能?

【问题讨论】:

    标签: javascript jquery css skrollr


    【解决方案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

    【讨论】:

    • 未按预期运行。在 iPad 上“滚动”时,它不会向下滚动。还有其他想法吗?不过还是谢谢。
    • 它甚至会触发滚动事件吗?我搜索了“检测 ipad 上的滚动”并找到了一个 SO 帖子 stackoverflow.com/questions/18753367/… 也许 touchmove 事件会起作用。他们还提到了一种叫做 iScroll
    猜你喜欢
    • 1970-01-01
    • 2010-10-18
    • 1970-01-01
    • 1970-01-01
    • 2018-10-02
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2021-11-13
    相关资源
    最近更新 更多