手机上的垂直滚动和水平拖动div div

问题描述：

我正在试图制作一个带有网卡界面的手机网站。我想要创建的互动是一张我可以通过滑动浏览并将其消除的卡片清单。为了实现这一点，我目前使用jQuery UI和jQuery UI Touch Punch来使它与触摸设备一起工作。手机上的垂直滚动和水平拖动div div

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

这是网站，我需要它：

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

（只显示在触摸设备上的这种行为，适用于台式机非常精细）

类似的问题已经被问之前，但尚未得到答复：

JQuery-UI horizontal dragging with vertical scrolling

和不太重要的任务离子;拖动是相当生涩什么可能造成这个？我使用了多个库和css框架，我的猜测是有些东西与jQuery UI相冲突。我会在滚动修复之后研究这个问题，但如果有人知道可能会造成这种情况，那会很棒！

EDIT2：

不，那不是。这是“过渡：全部.2s”;那是在搅乱运动。

EDIT1：看起来它是由我draggin周围的div的动态宽度造成的：

jQuery UI make the effect less abrupt and jerky

答

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

答

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

测量所述光标的垂直位置的任何变化，并使用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; 
});

一触控装置上。这将密切模仿天然滚动。

手机上的垂直滚动和水平拖动div div

相关推荐