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

Question

我正在尝试制作一个带有卡片界面的移动网站。我想要创建的交互是一个卡片列表，我可以滚动浏览并通过滑动它们将其关闭。为了实现这一点，我目前正在使用 jQuery UI 和 jQuery UI Touch Punch 来让它与触摸设备一起工作。

我遇到的问题是，当我使用从 div 开始的触摸事件滚动时，它只将它用于水平拖动，而忽略了垂直滑动。有什么方法可以防止这种情况发生，或者其他库是否更适合我的需求？

这是我需要它的网站:

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

(它只在触摸设备上显示这种行为，在桌面上工作得很好)

以前有人问过类似的问题，但仍未得到回答:

JQuery-UI horizontal dragging with vertical scrolling

还有一个不太重要的问题；拖动非常不稳定，这可能是什么原因造成的？我在彼此之上使用了几个库和 css 框架，我的猜测是某些东西与 jQuery UI 发生了冲突。我会在滚动修复后进行调查，但如果有人知道可能导致它的原因，那就太好了!

编辑2:

不，不是这样。这是“过渡:所有.2s;”那是在扰乱运动。

编辑1:看起来这是由我拖动的 div 的动态宽度引起的:

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

这将非常模拟触摸设备上的 native 滚动。