javascript - 虚拟滚动 - 没有 Ajax

Question

我一直在网上寻找各种“无限滚动”解决方案，这些解决方案可让用户滚动浏览您网站上的数据或图像，然后将数据循环回到开头或在浏览过程中加载位。例如在一个选择框中:

http://ivaynberg.github.com/select2/

我正在尝试做的是类似的事情，但我已经在一个数组中拥有 200 多条记录的完整数据集，我将每条记录渲染到列表项中。一次只有 5 个列表项适合屏幕，所以每次我到达该组的末尾时，下一组已经在那里等待滚动(使用触摸/鼠标事件)。

我尝试在进入每个数据集时附加/前置元素，但这在移动设备上非常慢。我接下来尝试的是这样的:

1) 创建一些占位符。

2) 当占位符滚动出视觉边界时，将它们推回到初始位置(带有新数据)，从而产生无缝滚动的错觉。

3) 从框中找出要从中获取数据的页面索引位置。使用新数据重新填充所有占位符。

在触摸/鼠标移动事件处理程序中:

ondrag: function(e) {
  var top, row, rows, delta = 1, prefix;

  if(e.direction === 'up') {
    e.distance = e.distance * -1;
  }

  rows = Math.floor(this._grid.scrollHeight / this._grid.ticketHeight); 

  // Use a simpler row-snap rule.
  top = (this._previous.top + e.distance) * delta;  // Top offset.
  row = Math.floor(top / this.rowHeight);  // Row position.

  // Makes the scroll infinite by seamlessly bouncing back.
  if(Math.abs(row) > rows) {                
     top = (e.distance * delta);        
  }

  elems = this.$el.find('.ticketRow');
  for(i = 0; i < elems.length; i++) {
    elems[i].style.webkitTransform = 'translate(0px,' + ((i * this.rowHeight) + top) + 'px)';       
  }

  if(this._offset !== Math.abs(row)) {
    this._offset = Math.abs(row);

    if(e.direction == 'down') {
      this._track--;
    } else {
      this._track++;
    }
    // Get new data from data source and apply it to the place holders.
    this.update(this._track);
  }
},

然而，这会产生令人讨厌的弹跳/抖动效果。我也尝试将每行的新位置设置为移动距离的倍数，但我仍然得到非常不稳定的结果。

我的问题是，我是否正确处理了这个问题？有什么东西已经为我做了这个吗？更妙的是，我上面的数学问题在哪里？

感谢任何帮助!

注意:我正在使用 hammer.js捕捉我的触摸手势。

Answer 1

您是否尝试过将所有项目设置为 display: none 并在初始化时显示前五个，然后使用 scrollPosition 将 display 设置为 block？