在 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 容器的值。但是，当您在滚动时加载时，情况会变得复杂，因为滚动可能“带有惯性”，尤其是在触摸屏设备/笔记本电脑上的触摸板上。

（根据经验，当我过于自信时，我可以自己编写一个虚拟列表，最终由于很多边缘情况而使用库）