An den Anfang von div in React anhängen, ohne den Bildlaufstatus zu beeinträchtigen
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;
}