移动滚动的Laggy元素位置更新

Question

我正在尝试制作一个粘性标题+第一列表.适用于桌面浏览器.

但是,当我在移动设备上滚动表格的x轴时,位置更新是拖动,即不够快.

我已经阅读了各种推荐iScroll的 SO线程.在这种情况下,我不确定如何正确使用它.应该拦截tbody滚动事件,根据iScroll的事件值来保留默认行为并更新位置？请指出我在正确的方向:)

$(function() {
  var $tbody = $('tbody');

  $tbody.on('scroll', function(e) { 
    var left = $tbody.scrollLeft();
    $('thead').css('left', -left); 
    $('tbody td:nth-child(1), thead th:nth-child(1)').css('left', left);
  });

  var iScroll = new IScroll($tbody[0], { probeType: 3 });
  iScroll.on('scroll', function(){
    console.log('not fired?');
  });
});

https://jsfiddle.net/97r799gr/

要重现此问题,您最简单的方法是在手机上访问https://jsfiddle.net/97r799gr/show.我正在使用SGS7边缘,所以我认为这几乎可以在任何移动设备上重现.

Answer 1

我无法让它与纯 CSS 一起工作，所以我决定删除 iScroll 并用 vanilla js 重写 javascript。现在在我的 iPhone 上运行得很好。我没有安卓可以测试。

新小提琴：https://jsfiddle.net/66a1b2rw/

除了js之外，一切都与你原来的小提琴相同：

更新了js

var tbody = document.querySelector('tbody');
var thead = document.querySelector('thead');
var firstCol = document.querySelectorAll('tbody td:nth-child(1), thead th:nth-child(1)');
console.log(firstCol);
tbody.addEventListener('scroll', function() {
    var left = tbody.scrollLeft;
  thead.style.left = '-' + left + 'px';
  firstCol.forEach(function(x) {x.style.left = left + 'px'})
})