javascript - Enable scrolling with drag-n-drop on touch devices -

re-arranging columns , click working on touch devices. facing issue scrolling. tried resolve iscroll plugin didn't work. screenshot took device mode of chrome browser.

table columns can added on-the-fly , number of columns may vary.

is there css way work scrolling ??? if not how implement javascript or jquery ???

update: -webkit-overflow-scrolling: touch; not working.

update 2: tried below code:

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

and 1 well:

 if (modernizr.touch) {                           //iscroll plugin                               var myscroll = new iscroll('#tblgrid', {                                    scrollbars: true                 });             } 

none of them worked.

update 3:

below code enable dragging of table columns , click event:

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

update 4:

i tried use iscroll 4 , scrolling works. when rearrange/drag-drop columns, scrolling works , in case drag-drop not work due touchmove event.

and jquery.floatthead stopped working fixes headers.

i'm not entirely sure end goal is, let me see if understand:

1. you want able scroll table horizontally on touch devices. works right now.

2. you want able drag , drop columns rearrange them. want dragging column headers. right now, when touchmove listener causing whole table scroll horizontally when drag column, problem.

if i'm correct on 2 points above, think might fix problem change init() adds touch listeners table headers (instead of entire document). this:

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

you need apply 4 event listeners new column headers added table (wherever you're handling 'add column' logic).

i'm not 100% work - if post repro of problem somewhere http://jsfiddle.net/, might easier debug it.