如何修复移动设备上jQuery DataTable中的scrollX移动问题？

我用下面的代码来模拟带有垂直和水平滚动条的固定标题。见example on jsFiddle。如何修复移动设备上jQuery DataTable中的scrollX移动问题？

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

上面的代码在桌面上工作正常。

但是在移动设备上当我滚动内容头部分的主体时不相应地移动。移动设备中的标题移动有一些延迟（闪烁效果）。

如何解决移动设备中的标题移动问题？

来源

2015-09-22 RGS

您使用的是哪种版本的DataTable？如果不是最新的（1.10.9），你可以试试1.10.9，看看你是否仍然遇到同样的问题？ –

@ Gyrocode.com，我已经更新了我的版本（1.10.9）。更新版本后的事件存在同样的问题。 – RGS

除了自定义宽度的问题，它还可以在Android 5上正常工作，不闪烁。你在什么移动平台上看到闪烁？ –

试试这个，如果它适合你。这是另一种方式，但它的工作原理。也许你只需要调整宽度或任何其他。通过jsFiddle运行它来测试它。

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

好的，如果闪烁的效果存在，请尝试这样的事情。你的滚动是好的。这是吸引人的效果。

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

来源

2015-10-01 11:30:52

它不适用于Android 4.3果冻豆版本 – RGS

问题不在列表中，它在这种闪烁的效果。这是/仍然是某种错误。我更新了我的答案。现在就试试。 –

ups，sry，我把cp-ed的行数加上了。 –

如何修复移动设备上jQuery DataTable中的scrollX移动问题？

回答

相关问题