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

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

我已经创建了一个包含iscroll-probe.js代码的小提琴（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/

Answer 2

我无法使用纯CSS，因此我决定删除iScroll并重写vanilla js中的javascript。它现在在我的iPhone上工作正常。我没有用于测试的安卓。

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

除了js：

之外，一切都与原始小提琴相同

更新了js

string referer = Request.Headers["Referer"].ToString();
string url = Regex.Replace(referer, Request.Host.ToString(), $"{Request.Host.ToString()}/{lang}");
return Redirect(url);

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

2 个答案:

更新了js