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

Question

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

6

我使用以下代码模拟了一个带有垂直和水平滚动条的固定标题。请参见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
 });

在桌面电脑上，上述代码可以正常运行。

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

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

- RGS

你使用的DataTables版本是什么？如果不是最新版本（1.10.9），可以尝试使用1.10.9并查看是否仍然遇到相同的问题吗？ - Gyrocode.com

@Gyrocode.com，我已经更新了我的版本（1.10.9）。即使更新了版本，仍然存在相同的问题。 - RGS

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

2

在某些设备上，固定位置的解决方案很难实现，因为在惯性滚动期间触发滚动事件的支持不佳。特别是旧版iOS设备和Android设备会受到影响。有一些补丁可以修复这个问题，但它们非常重，并且可能会在本来不会在惯性滚动期间触发滚动事件的设备上引起闪烁。 - Graham Bass

在某些情况下，将 translate3d(0,0,0) 添加到滚动元素中可能会有所帮助，因为它可以启用该元素上的 CSS 动画的 3D 加速。 - Graham Bass

显示剩余7条评论

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Josip Ivic · Accepted Answer

如果您愿意，可以尝试以下方法。虽然顺序是相反的，但它有效。也许您只需要调整宽度或其他内容。请通过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)";
                    },
);
                });