移动设备上可垂直滚动和水平拖动的 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：

不，不是这样。是 "transition: all .2s;" 扰乱了运动。

编辑1：看起来它是由 divs 的动态宽度引起的，我在周围拖动：

jQuery UI make the effect less abrupt and jerky

Answer 1

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

Answer 2

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

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

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

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

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

Vertically scrollable and horizontally draggable divs on mobile

html

css

jquery

jquery-ui

touch