时间戳

首页 > 解决方案 > 如何修复手机上的抽搐错误粘表？

javascript - 如何修复手机上的抽搐错误粘表？

问题描述

我根据 jquery floatthead 插件制作了我的表格。桌子有一个粘头。并且在下面的移动设备上出现表格滚动并且第一列变得粘滞。但在真实设备上，它的工作原理很不正常。表头抽搐。第一栏也是。如何修复这些错误？

我的桌子： https ://codepen.io/malinosky/pen/vrBgMP

jQuery(function($) {
  var table = $(".b-table");
  table.floatThead({ position: "absolute", top: 0 });

  var tableWraps = $(".table-responsive");

  tableWraps.each(function() {
    var tableWrap = $(this);
    var headFirstColumn = tableWrap.find("td:first-child");

    tableWrap.on("scroll", function() {
      headFirstColumn.css("left", this.scrollLeft);
    });
  });
});

标签： javascriptjquery

解决方案

不要使用absolute位置。而是这样做： table.floatThead({ position: "fixed", top: 0 });

绝对位置更适合内部滚动表。固定位置更适合页面滚动。如果您不提供值，插件会为您设置这些内容。

使用固定位置设置，当您滚动页面时，表格的位置是“固定的”，从而消除了抖动。

推荐阅读