私もこの質問に対する答えを探しているので、私がどこにいるのかを共有します。
縦に表示したい大量のコンテンツがあり、ユーザーにスクロールさせます。すべてをDOMにロードして通常どおりスクロールできますが、最初の作成フェーズは非常に遅く、スクロールも非常に遅くなる可能性があります. また、より多くのデータをストリーミングすると、動的に追加されます。
したがって、非スクロール領域にコンテンツを動的に入力して更新できるのと同じことが必要です。ユーザーがそのコンテンツをスクロールしているように見せ、モデル (大量のデータを含む) が表示されるまで DOM から離れているようにしたいと考えています。
目に見える DOM 要素を管理するために、キューの概念を使用するつもりです。DOM に表示されるオフ DOM 要素を記憶するために、queueHeadIndex と queueTailIndex を保存します。ユーザーが下にスクロールすると、キューの先頭が画面から落ちるかどうか、および queueHeadIndex を更新して DOM 要素を削除するかどうかを調べます。次に、queueTailIndex を更新して新しい要素を DOM に追加する必要があるかどうかを判断します。現在DOMにある要素については、それらを移動する必要があります（ここでアニメーションが必要かどうかはまだわかりません）。
更新:私はいくつかの約束を持っているように見えるこれを見つけましたhttp://jsfiddle.net/GdsEa/
私の現在の考えでは、問題には 2 つの部分があるということです。
まず、スクロールを無効にして、ある種の仮想スクロールを行いたいと思います。これについては、 http://www.everyday3d.com/blog/index.php/2014/08/18/smooth-scrolling-with-virtualscroll/を見始めたところです。これにより、すべてのイベントがキャプチャされ、現在表示されているものなどをプログラムで調整できるようになりますが、ブラウザーは実際には何もスクロールしません。これは、マウス ホイール駆動のスクロールを提供するようです。
次に、スクロール バーを表示する必要があると思います。http://codepen.io/chriscoyier/pen/gzBsAを見て、よりネイティブに見えるものを探しています。スクロールがどこにあるかを視覚的に表示し、ユーザーがスクローラーをドラッグしてスクロール位置を調整できるようにしたいだけです。
Stackoverflowはコードを貼り付けると主張しているので、上記のcodepenリンクからのコードを次に示します
var elem = document.getElementById('scroll-area'),
track = elem.children[1],
thumb = track.children[0],
height = parseInt(elem.offsetHeight, 10),
cntHeight = parseInt(elem.children[0].offsetHeight, 10),
trcHeight = parseInt(track.offsetHeight, 10),
distance = cntHeight - height,
mean = 50, // For multiplier (go faster or slower)
current = 0;
elem.children[0].style.top = current + "px";
thumb.style.height = Math.round(trcHeight * height / cntHeight) + 'px';
var doScroll = function (e) {
// cross-browser wheel delta
e = window.event || e;
var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
// (1 = scroll-up, -1 = scroll-down)
if ((delta == -1 && current * mean >= -distance) || (delta == 1 && current * mean < 0)) {
current = current + delta;
}
// Move element up or down by updating the `top` value
elem.children[0].style.top = (current * mean) + 'px';
thumb.style.top = 0 - Math.round(trcHeight * (current * mean) / cntHeight) + 'px';
e.preventDefault();
};
if (elem.addEventListener) {
elem.addEventListener("mousewheel", doScroll, false);
elem.addEventListener("DOMMouseScroll", doScroll, false);
} else {
elem.attachEvent("onmousewheel", doScroll);
}
仮想スクロール メソッドまたは UI のいずれかによってスクロール イベントをリッスンし、UI スクローラーと管理しているコンテンツの UI を更新するクラスが 1 つあると思います。
とにかく、もっと役立つものが見つかったら、これを更新します。