在 React 中附加到 div 的頂部而不弄亂滾動狀態

Question

我在反應時遇到問題。我正在嘗試實現一個簡單的可滾動 div，其中包含很多子 div，可以透過水平滾動查看。

基本上每個子 div 對應一天。用戶在第一次查看有關當天和接下來幾天的信息時加載該組件。但是，如果用戶滾動（向左或向右），我希望能夠附加更多信息，實現某種“無限滾動功能”。

當我嘗試在父 div 的末尾附加新的子 div 時，我沒有任何問題。然而，當我嘗試在父div 的開頭附加新的子元素時（例如，用戶想要查看前幾天的內容），添加新元素後，滾動會發生變化，導致用戶對滾動發生變化的原因感到困惑。

我創建了一個小型 JS 小提琴來複製我的設定。嘗試點擊“新增左側”，您將看到當前的行為。 有沒有辦法在不改變整個視圖的情況下新增元素？ https://jsfiddle.net/k75pvey3/3/

P.s.我在網路上看到了很多關於這個問題的答案。然而，我見過的所有這些都假設新元件具有特定的寬度。就我而言（正如我試圖在小提琴中顯示的那樣），我無法確定新添加的子 div 的寬度。

這裡是程式碼供參考：

function App(props) {

  const [array, 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)])
  }

  return (
    <div className='App'>
      <button onClick={addLeft}>add left</button>
      <button onClick={addRight}>add right</button>
      <div className="container">
        {array.map(i => (<div className="element" style={{minWidth:i}}>{i}</div>))}
      </div>
    </div>
  );
}

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

這是CSS：

.container {
  background-color: red;
  width: 550px;
  height: 120px;
  margin: auto;
  display: flex;
  overflow: auto;
}

.element {
  height: 100px;
  background-color: yellow;
  margin: 10px;
  font-size: 30px;
  color: black;
  display: flex;
}

Answer 1

我有一個壞消息給你，這通常是虛擬列表的複雜部分之一 - 在滾動軸的開頭添加一個新元素，同時保持滾動位置。

通常建議您使用現有的解決方案，例如 react-virtualized 或 react-window。

如果您不想使用現有的庫，一種解決方案是您可以監聽div 內內容的width （例如。Element.scrollWidth)，然後透過設定.scrollLeft 容器的值。但是，當您在滾動時加載時，情況會變得複雜，因為滾動可能“帶有慣性”，尤其是在觸控螢幕設備/筆記型電腦上的觸控板上。

（根據經驗，當我過於自信時，我可以自己編寫一個虛擬列表，最終由於很多邊緣情況而使用庫）