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

Question

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

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

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

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