Question

我试图建立一个带有卡片界面的移动网站。我想要创建的交互是一个我可以滚动的卡片列表，并通过轻扫它们来解除。为了实现这一点，我目前正在使用带有jQuery UI Touch Punch的jQuery UI来使其与触摸设备一起使用。

我遇到的问题是当我从div开始滚动触摸事件时，它只使用它来水平拖动它，忽略垂直滑动。有没有办法防止这种情况，或者不同的库会更适合我的需求？

这是我需要的网站：

http://tijmen.kervers.nl/B1.2

（它只在触摸设备上显示此行为，在桌面上运行得非常好）

以前曾提出类似的问题，但仍未得到答复：

JQuery-UI horizontal dragging with vertical scrolling

一个不那么重要的问题;拖动是非常生涩可能导致这种情况？我在彼此之上使用了几个库和css框架，我的猜测是有些东西与jQuery UI发生冲突。滚动修复后我会调查一下，但如果有人知道可能导致它的原因那会很棒！

EDIT2：

不，那不是。过渡时期：所有.2s;＆＃34;那是弄乱运动的。

EDIT1：看起来它是由divs的动态宽度引起的：

jQuery UI make the effect less abrupt and jerky

Answer 1

我遇到了与你的问题几乎相同的问题，并提出了一个相对简单的解决方法。

测量光标垂直位置的任何变化，并使用window.scrollBy手动滚动窗口相同的数量：

var firstY = null;      
var lastY = null;
var currentY = null;
var vertScroll = false;
var initAdjustment = 0;

// record the initial position of the cursor on start of the touch
jqDraggableItem.on("touchstart", function(event) {
    lastY = currentY = firstY = event.originalEvent.touches[0].pageY;
});

// fires whenever the cursor moves
jqDraggableItem.on("touchmove", function(event) {
    currentY = event.originalEvent.touches[0].pageY;
    var adjustment = lastY-currentY;

    // Mimic native vertical scrolling where scrolling only starts after the
    // cursor has moved up or down from its original position by ~30 pixels.
    if (vertScroll == false && Math.abs(currentY-firstY) > 30) {
        vertScroll = true;
        initAdjustment = currentY-firstY;
    }

    // only apply the adjustment if the user has met the threshold for vertical scrolling
    if (vertScroll == true) {
        window.scrollBy(0,adjustment + initAdjustment);
        lastY = currentY + adjustment;
    }

});

// when the user lifts their finger, they will again need to meet the 
// threshold before vertical scrolling starts.
jqDraggableItem.on("touchend", function(event) {
    vertScroll = false;
});

这将非常类似于触摸设备上的原生滚动。

Answer 2

经过多次搜索后，我得出结论，目前这是不可能的。我想可以编写一个jQuery插件来解决这个问题，但这远远超出了我的技能水平。

移动设备上可垂直滚动和水平拖动的div

2 个答案: