Web サイトに表示するコンテンツがたくさんあるため、ユーザーが現在読み込まれているコンテンツの最後に向かってスクロールするときにコンテンツが読み込まれる「無限」スクロール ソリューションを使用する必要があります。ただし、データの量は正確に把握しており、ユーザーにはそのことをある程度理解してもらいたいと考えています。スクロールバーがコンテンツの終わりに近づいているように見えるのが好きではありません.その後、突然、より多くのコンテンツが読み込まれ、サム/スライダーがスクロールトラックの真ん中にあり、狭くなります.
私が計画している解決策は、現在のコンテンツの後に div を作成することです。これは巨大ですが空のものであり、さらにコンテンツをロードするにつれて縮小します。より良いアイデアはありますか？
UI要素を設計するとき、最初に尋ねなければならないことは、エンドユーザーに実際に何を体験してもらいたいかということです。あなたの解決策は、まだそこにない大量のデータがあるように見えるようにします（そして、それが古い/アーカイブのものである場合、それはユーザーに関係がないかもしれません）。見た目が長すぎるため、ユーザーがコンテンツを読むのを妨げる可能性があります。
問題は、スクロールバーがコンテンツの拡張をサポートするように設計されていないことです。ご指摘のとおり、そのようなコンテンツを欺くものです。完全な情報を提供するまったく新しいスクロール機能を設計できます
何がロードされて現在のものであるかを示す緑色の背景、ロードされているが古いデータを示す黄色のセクション、およびユーザーがスクロールするときにダウンロードできるものを示す赤色のセクションを備えた色付きのスクロールバーは、これを非常にうまく行います。
私の最終的な解決策は、スクロールバーを持つ div 内にテーブルを作成することでした。テーブルの高さをコンテンツの総量の高さに設定し、最初の行をコンテンツの未表示部分の高さに設定し、次の行は現在見ているコンテンツです。
次に、画面に表示されているものだけ、または表示領域の近くにあるものだけを描画する、横スクロール ビデオ ゲームによく似たプロセスを使用しました。ウェイポイントを活用して、ユーザーがスクロールしている場所を追跡し、表示されているコンテンツを更新し、jquery の scrollto 機能を使用して、ユーザーが表示している場所と同じ場所に留まるようにしました。そのため、現在の表示領域の上または下に約 1 ページ分のコンテンツのみが「表示」されます。
すべての「コンテンツ」は実際にはクライアントのシステムに既に存在するため、ダウンロードは問題ではありません。私にとっての問題は、「コンテンツ」が大規模な DOM 構造であり、すべてを一度に処理しようとすると、クライアントのシステムが恐ろしく遅くなるということです。そのため、一度にその一部のみを作成して表示します。
これにより、スクロールバーをつかんでコンテンツの一番下にドラッグすると、画面がリフレッシュされ、悪い結果が得られるため、多少の途切れが生じます。より良いものを見つけたら、これを更新します。
更新 私は自分のサイトでこれを行う方法を文書化しました: http://0xdabbad00.com/2012/11/25/icebuddha-scrolling-javascript-infinite-scrolling-in-a-finite-area/
最大化されたドキュメントの最後 (たとえば 15k ピクセル) に目立たない文字を挿入して、スクロール バーがページの深さを正確に反映するようにすることができます。このようなもの…</p>
document.write('<div style="Position:Absolute; Left:0px; Top:15000px;";>.</div>');