Come risolvere il problema del movimento scrollX in jQuery DataTables su dispositivi mobili?

Question

Ho usato sotto il codice per simulare l'intestazione fissa con barre di scorrimento verticali e orizzontali. Vedi example on jsFiddle.

$('#liveTable').dataTable({ 
     'bSort': false, 
     'destroy': true, 
     'aoColumns': [ 
        { sWidth: "85px", bSearchable: false, bSortable: false }, 
        { sWidth: "75px", bSearchable: false, bSortable: false }, 
        { sWidth: "80px", bSearchable: false, bSortable: false }, 
        { sWidth: "80px", bSearchable: false, bSortable: false }, 
        { sWidth: "85px", bSearchable: false, bSortable: false }, 
        { sWidth: "70px", bSearchable: false, bSortable: false }, 
        { sWidth: "70px", bSearchable: false, bSortable: false }, 
        { sWidth: "50px", bSearchable: false, bSortable: false } 
       ], 
     'scrollY': 200, 
     'scrollX': true, 
     'info': false, 
     'paging': false 
}); 

Il codice sopra riportato funziona perfettamente in Desktop.

Ma nei dispositivi mobili quando si scorre il corpo dell'intestazione del contenuto, la parte non si sposta di conseguenza. C'è un po 'di ritardo (effetto sfarfallio) nel movimento dell'intestazione nei dispositivi mobili.

Come risolvere il problema di movimento dell'intestazione nei dispositivi mobili?

Answer 1

Prova questo se funziona per te. È il contrario, ma funziona. Forse avrai solo bisogno di regolare la larghezza o qualsiasi altra cosa. Corri attraverso jsFiddle per testarlo.

$.event.special.scrollstart = { 
     enabled: true, 

      setup: function() { 
       var thisObject = this, 
        $this = $(thisObject), 
         scrolling, 
         timer; 

       function trigger(event, state) { 
        scrolling = state; 
        var originalType = event.type; 
        event.type = scrolling ? "scrollstart" : "scrollstop"; 
        $.event.handle.call(thisObject, event); 
        event.type = originalType; 
       } 


       $this.bind(scrollEvent, function(event) { 
        if (!$.event.special.scrollstart.enabled) { 
         return; 
        } 

        if (!scrolling) { 
         trigger(event, true); 
        } 

        clearTimeout(timer); 
        timer = setTimeout(function() { 
         trigger(event, false); 
        }, 50); 
       }); 
      } 
    }; 

Ok, se l'effetto sfarfallio esiste, provare qualcosa di simile. La tua scroll è ok. È l'effetto che fa schifo.

   document.getElementById("btn").addEventListener("click", function(){ 
        var abc = document.getElementById("abc"); 
        var def = document.getElementById("def"); 

        abc.style["-webkit-transition-duration"] = "0ms"; 
        def.style["-webkit-transition-duration"] = "0ms"; 
        abc.style["-webkit-transform"] = "translate3d(0, 0, 0)"; 
        def.style["-webkit-transform"] = "translate3d(100%, 0, 0)"; 
        setTimeout(function(){ 
         abc.style["-webkit-transition-duration"] = "1s"; 
         def.style["-webkit-transition-duration"] = "1s"; 
         abc.style["-webkit-transform"] = "translate3d(-100%, 0, 0)"; 
         def.style["-webkit-transform"] = "translate3d(0, 0, 0)"; 
        }, 
); 
       });