スクロール状態をいじらずに React の div の先頭に追加します

Question

反応に問題があります。水平スクロールで表示できる多くの子 div を含む、単純なスクロール可能な div を実装しようとしています。

基本的に、各子 div は 1 日に対応します。このコンポーネントは、ユーザーが当日と翌日に関する情報を初めて表示するときにロードされます。ただし、ユーザーが（左または右に）スクロールした場合、ある種の「無限スクロール機能」を実装して、より多くの情報を追加できるようにしたいと考えています。

親 div の最後に新しい子 div を追加しようとしても、問題はありません。ただし、親 div の先頭に新しい子要素を追加しようとすると (たとえば、ユーザーが前日のコンテンツを見たい場合)、新しい要素を追加した後にスクロールが変化し、ユーザーはなぜスクロールが変化しています。

セットアップを複製するために小さな JS フィドルを作成しました。 「左に追加」をクリックしてみると、現在の動作が表示されます。 ビュー全体を変更せずに新しい要素を追加する方法はありますか? https://jsfiddle.net/k75pvey3/3/

P.s. この質問に対する多くの回答をオンラインで見ました。ただし、私が見たこれらはすべて、新しいコンポーネントが特定の幅を持つことを前提としています。私の場合（フィドルで表示しようとしているのですが）、新しく追加された子 div の幅を決定できません。

参考コードは次のとおりです:

関数アプリ(小道具) {

  const [配列, setArray] = React.useState(['100', '321', '32', '412', '12', '33', '54'])

  const addLeft = () => {
    setArray([Math.floor(Math.random()*300), ...array])
  }
  
  const addRight = () => {
    setArray([...array, Math.floor(Math.random()*300)])
  }

  戻る （
    <div className='アプリ'>
      <ボタン onClick={addLeft}>左を追加</button>
      <ボタン onClick={addRight}>右を追加</button>
      <div className="コンテナ">
        {array.map(i => (<div className="element" style={{minWidth:i}}>{i}</div>))}
      </div>
    </div>
  );
}

ReactDOM.render(<App />, document.querySelector("#app"))

これは CSS です:

＃＃＃。容器 { 背景色: 赤; 幅: 550ピクセル; 高さ: 120ピクセル; マージン: 自動; ディスプレイ: フレックス; オーバーフロー: 自動; } 。要素 { 高さ: 100ピクセル; 背景色: 黄色; マージン: 10px; フォントサイズ: 30px; 色: 黒; ディスプレイ: フレックス; }

Answer 1

悪いお知らせがあります。これは通常、仮想リストの複雑な部分の 1 つです。スクロール位置を維持しながら、スクロール軸の先頭に新しい要素を追加します。

通常は、react-virtualized や react-window などの既存のソリューションを使用することをお勧めします。

既存のライブラリを使用したくない場合、解決策の 1 つは、div 内のコンテンツの width をリッスンすることです (例: #) ##Element.scrollWidth)、.scrollLeft コンテナーの値を設定します。ただし、スクロール中にロードすると、特にラップトップのタッチスクリーン デバイスやタッチパッドではスクロールが「惰性で」行われる可能性があるため、状況が複雑になります。

(経験則として、自信過剰になると、自分でダミーのリストを作成し、多くの特殊なケースが原因で最終的にライブラリを使用することになります)