通过在触摸设备上拖放来启用滚动

重新安排列和点击现在在触摸设备上工作。 现在面临滚动的问题。 我试图用iScroll插件解决它，但它没有工作。 我从chrome浏览器的设备模式截图。

表列可以即时添加，因此列数可能会有所不同。

有没有任何css方式来正常工作滚动？ 如果不是我怎么用javascript或jquery实现它？

更新： -webkit-overflow-scrolling：touch; 不pipe用。

更新2：尝试用下面的代码：

 if (Modernizr.touch) { $('.container-fluid').css('overflow', 'auto'); } 

还有这个：

  if (Modernizr.touch) { //iScroll plugin var myScroll = new IScroll('#tblGrid', { scrollbars: true }); } 

他们都没有工作。

更新3：

以下是启用拖动表格列和点击事件的代码：

 var clickms = 200; var lastTouchDown = -1; function touchHandler(event) { var touch = event.changedTouches[0]; var d = new Date(); var type = ""; switch (event.type) { case "touchstart": type = "mousedown"; lastTouchDown = d.getTime(); break; case "touchmove": type = "mousemove"; lastTouchDown = -1; break; case "touchend": if (lastTouchDown > -1 && (d.getTime() - lastTouchDown) < clickms) { lastTouchDown = -1; type = "click"; break; } type = "mouseup"; break; default: return; } var simulatedEvent = document.createEvent("MouseEvent"); simulatedEvent.initMouseEvent(type, true, true, window, 1, touch.screenX, touch.screenY, touch.clientX, touch.clientY, false, false, false, false, 0, null); touch.target.dispatchEvent(simulatedEvent); event.preventDefault(); } function init() { document.addEventListener("touchstart", touchHandler, true); document.addEventListener("touchmove", touchHandler, true); document.addEventListener("touchend", touchHandler, true); document.addEventListener("touchcancel", touchHandler, true); } $(document).ready(function () { init(); var myScroll; function loaded() { myScroll = new IScroll('#tblGrid', { mouseWheel: true, scrollbars: true, click: true, eventPassthrough: true, tap: true }); } if (Modernizr.touch) { loaded(); } }); 

更新4：

我试图使用iScroll 4 ，现在滚动工作。 但是，当我重新排列/拖放列时，滚动也起作用，在这种情况下，由于touchmove事件，拖放无法正常工作。

而jquery.floatThead也停止了修复头文件的工作。

Answer 1

我不完全确定你的最终目标是什么，但让我看看我是否明白：

1. 你想能够在触摸设备上水平滚动你的桌子。 这现在工作。

2. 您希望能够拖放您的列以重新排列它们。 您想要通过拖动列标题来完成此操作。 现在，当你这样做的时候， touchmove监听器在拖动列时会导致整个表格水平滚动，这是一个问题。

如果我在上面的两点是正确的，那么我认为可以解决你的问题是改变init() ，使它只添加到你的表头（而不是整个文档）的触摸监听器。 像这样的东西：

 function init() { $( "th" ).each(function( index ) { this.addEventListener("touchstart", touchHandler, true); this.addEventListener("touchmove", touchHandler, true); this.addEventListener("touchend", touchHandler, true); this.addEventListener("touchcancel", touchHandler, true); }); } 

您还需要将四个事件侦听器应用于添加到表中的任何新列标题（无论您当前正在处理您添加列逻辑的位置）。

我不确定这会100％的工作 – 如果你可以在http://jsfiddle.net/这个地方发布一个repro的问题，可能会更容易帮你debugging它。