Javascript 如何修复移动设备上jQuery数据表中的scrollX移动问题？

我使用了下面的代码来模拟带有垂直和水平滚动条的固定标题。看

上面的代码在桌面上运行良好

但在移动设备中，当我滚动内容头的主体部分时，并没有相应地移动。在移动设备中，报头移动存在一些延迟（闪烁效应）

---

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

如果适用，请尝试此方法。这是另一种方式，但它是有效的。也许你只需要调整宽度或其他什么。通过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)";
                    },
);
                }); 

---

您使用的数据表的版本是什么？如果不是最新版本（1.10.9），您可以试试1.10.9，看看您是否仍然遇到同样的问题？@Gyrocode.com，我已经更新了我的版本（1.10.9）。事件更新版本后，同样的问题也存在。除了自定义宽度的问题，它在Android 5上运行良好，没有闪烁。在哪个移动平台上，您看到闪烁？在某些设备上，固定位置解决方案很难实现，因为在动量滚动期间对滚动事件触发的支持较差。较旧的iOS设备和安卓设备尤其受到这种影响。有一些补丁可以解决这一问题，但它们非常沉重，可能会导致在动量滚动过程中没有本机触发滚动事件的设备上出现闪烁。在某些情况下，向滚动元素添加translate3d（0,0,0）可能会有所帮助，因为它可以为该元素上的css移动启用3d加速。问题不在于列表，就在这种闪烁的效果中。它过去/现在仍然是某种缺陷。我更新了我的答案。现在就试试。ups，sry，我在cp-ed时输入了行号。可以用小提琴提供工作示例吗？我想不行，因为您需要某种GUI来查看闪烁。这个问题没有解决方案？

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