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

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

1 个答案: