ユーザーがサイトのデータや画像をスクロールして、データを最初にループバックするか、進行中にビットをロードできるようにするさまざまな「無限スクロール」ソリューションをネットで調べてきました。たとえば、次のような選択ボックスで:
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を使用してタッチ ジェスチャをキャプチャしています。