虚拟滚动-没有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？