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

Posted 2023-05-07

【中文标题】如何修复移动设备上 jQuery DataTables 中的 scrollX 移动问题？

【英文标题】：How to fix scrollX movement issue in jQuery DataTables on mobile devices?

【发布时间】：2015-12-19 15:13:14

【问题描述】：

我使用下面的代码来模拟带有垂直和水平滚动条的固定标题。见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
 );

以上代码在 Desktop 中运行良好。

但在移动设备中，当我滚动内容标题部分的正文时，不会相应移动。移动设备中的标头移动存在一些延迟（闪烁效果）。

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

【问题讨论】：

您使用的是什么版本的数据表？如果不是最新的（1.10.9），可以试试 1.10.9 看看是否还遇到同样的问题？

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

除了自定义宽度的问题外，它在 android 5 上运行良好，没有闪烁。您在哪个移动平台上看到闪烁？

在某些设备上，固定位置解决方案很难做到，因为在动量滚动期间对触发事件的支持很差。较旧的 ios 设备和 Android 设备尤其受此影响。有一些补丁可以解决这个问题，但它们非常繁重，并且可能会导致在动量滚动期间不会原生触发滚动事件的设备上闪烁

在某些情况下，将 translate3d(0,0,0) 添加到滚动元素可能会有所帮助，因为它可以为该元素上的 css 移动启用 3d 加速。

【参考方案1】：

如果它适合你，试试这个。这是相反的方式，但它有效。也许你只需要调整宽度或任何东西。通过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)";
                    ,
);
                ); 

【讨论】：

问题不在于列表，而在于这种闪烁效果。它曾经/仍然是某种错误。我更新了我的答案。立即尝试。

ups，对不起，我在 cp-ed 时输入了行号。

是否可以在小提琴中提供工作示例？

我不认为，因为您需要某种 GUI 才能看到闪烁。

这个问题没有解决办法吗？