An den Anfang von div in React anhängen, ohne den Bildlaufstatus zu beeinträchtigen

Question

Ich habe Schwierigkeiten zu reagieren. Ich versuche, ein einfaches scrollbares Div zu implementieren, das viele untergeordnete Divs enthält, die durch horizontales Scrollen angezeigt werden können.

Grundsätzlich entspricht jede Kindergruppe einem Tag. Diese Komponente wird geladen, wenn ein Benutzer zum ersten Mal Informationen über den aktuellen Tag und die folgenden Tage anzeigt. Wenn der Benutzer jedoch scrollt (nach links oder rechts), möchte ich in der Lage sein, weitere Informationen anzuhängen und so eine Art „unendliche Scroll-Funktionalität“ zu implementieren.

Wenn ich versuche, am Ende des übergeordneten Divs ein neues untergeordnetes Div anzuhängen, habe ich keine Probleme. Wenn ich jedoch versuche, ein neues untergeordnetes Element am Anfang des übergeordneten Div anzuhängen (z. B. wenn der Benutzer Inhalte aus früheren Tagen sehen möchte), ändert sich der Bildlauf nach dem Hinzufügen des neuen Elements, was dazu führt, dass der Benutzer verwirrt ist, warum das so ist Die Schriftrolle verändert sich.

Ich habe eine kleine JS-Geige erstellt, um mein Setup zu replizieren. Versuchen Sie, auf „Links hinzufügen“ zu klicken, und Sie sehen das aktuelle Verhalten. Gibt es eine Möglichkeit, neue Elemente hinzuzufügen, ohne die gesamte Ansicht zu ändern? https://jsfiddle.net/k75pvey3/3/

P.s. Ich habe viele Antworten auf diese Frage online gesehen. Allerdings gehen alle davon, die ich gesehen habe, davon aus, dass die neue Komponente eine bestimmte Breite hat. In meinem Fall (wie ich in der Geige zu zeigen versuche) kann ich die Breite des neu hinzugefügten untergeordneten Divs nicht bestimmen.

Hier ist der Code als Referenz:

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"))

Das ist das 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 a> 或 react-window。

如果您不想使用现有的库，一种解决方案是您可以监听 div 内内容的 width （例如。 Element.scrollWidth)，然后通过设置 .scrollLeft 容器的值。但是，当您在滚动时加载时，情况会变得复杂，因为滚动可能“带有惯性”，尤其是在触摸屏设备/笔记本电脑上的触摸板上。

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