Ajouter en haut du div dans React sans jouer avec l'état de défilement

Question

J'ai du mal à réagir. J'essaie d'implémenter un simple div défilable qui contient de nombreux div enfants pouvant être visualisés avec un défilement horizontal.

En gros, chaque division enfant correspond à une journée. Ce composant se charge la première fois qu'un utilisateur consulte des informations sur la journée en cours et les jours suivants. Cependant, si l'utilisateur fait défiler (à gauche ou à droite), j'aimerais pouvoir ajouter plus d'informations, en implémentant une sorte de "fonctionnalité de défilement infini".

Lorsque j'essaie d'ajouter un nouveau div enfant à la fin du div parent, je n'ai aucun problème. Cependant, lorsque j'essaie d'ajouter un nouvel élément enfant au début du div parent (par exemple, l'utilisateur souhaite voir le contenu des jours précédents), le défilement change après l'ajout du nouvel élément, ce qui fait que l'utilisateur ne comprend pas pourquoi le le défilement change.

J'ai créé un petit violon JS pour reproduire ma configuration. Essayez de cliquer sur "Ajouter à gauche" et vous verrez le comportement actuel. Existe-t-il un moyen d'ajouter de nouveaux éléments sans modifier la vue entière ? https://jsfiddle.net/k75pvey3/3/

P.s. J'ai vu beaucoup de réponses à cette question en ligne. Cependant, tout ce que j'ai vu suppose que le nouveau composant a une largeur spécifique. Dans mon cas (comme j'essaie de le montrer dans le violon), je ne peux pas déterminer la largeur du div enfant nouvellement ajouté.

Voici le code pour référence :

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

Voici le 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

J'ai une mauvaise nouvelle pour vous, c'est généralement l'une des parties compliquées des listes virtuelles : ajouter un nouvel élément au début de l'axe de défilement tout en conservant la position de défilement.

Il est généralement recommandé d'utiliser une solution existante telle que react-virtualized a> 或 react-window.

Si vous ne souhaitez pas utiliser une bibliothèque existante, une solution est que vous pouvez écouter la largeur du contenu à l'intérieur du div (par exemple Element.scrollWidthdiv 内内容的 width （例如。 Element.scrollWidth)，然后通过设置 .scrollLeft), puis définissez-le par .scrollLeft La valeur du récipient. Cependant, les choses se compliquent lorsque vous chargez pendant le défilement, car le défilement peut se faire "avec inertie", en particulier sur les appareils à écran tactile/les pavés tactiles des ordinateurs portables.

(Par expérience, lorsque je suis trop confiant, je peux écrire moi-même une liste factice et finir par utiliser la bibliothèque à cause de nombreux cas extrêmes)