javascript - 移动滚动时延迟元素位置更新

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 edge，所以我认为这几乎可以在任何移动设备上重现。

Answer 1

IScroll 使用固定尺寸的包装器，其中包含一个可滚动的内容。因此我们不能使用 tbody 作为包装器。我们应该在滚动时用 CSS 包裹整个表格并保留所需的元素。

我用 iscroll-probe.js 代码创建了一个 fiddle (iscroll.js 没有 scroll 事件).坏消息是它只能在我的 iPhone 上使用。在我的 android5.1 设备上滚动时滚动突然停止。

// main code
$(document).ready(function(){ 
  $('#pos').text('initialize iscroll');
  try{
    var iScroll = new IScroll('#wrapper', { 
      interactiveScrollbars: true, 
      scrollbars: true, 
      scrollX: true, 
      probeType: 3, 
      useTransition:false, 
      bounce:false
    });
  } catch(e) {
    $('#error').text('Error ' + e.name + ":" + e.message + "\n" + e.stack);
  }

  $('#pos').text('initialized');

  iScroll.on('scroll', function(){
    var pos = $('#scroller').position();
    $('#pos').text('pos.left=' + pos.left + ' pos.top=' + pos.top);

    // code to hold first row and first column
    $('#scroller th:nth-child(1)').css({top: (-pos.top), left: (-pos.left), position:'relative'});
    $('#scroller th:nth-child(n+1)').css({top: (-pos.top), position:'relative'});

    $('#scroller td:nth-child(1)').css({left: (-pos.left), position:'relative'});
  });
});

https://jsfiddle.net/0qv1kjac/11/