Tambahkan pada bahagian atas div dalam React tanpa mengacaukan keadaan skrol

Question

Saya menghadapi masalah untuk bertindak balas. Saya cuba melaksanakan div boleh tatal mudah yang mengandungi banyak div kanak-kanak yang boleh dilihat dengan menatal mendatar.

Pada asasnya setiap div kanak-kanak sepadan dengan hari. Komponen ini memuatkan kali pertama pengguna melihat maklumat tentang hari semasa dan hari-hari berikutnya. Walau bagaimanapun, jika pengguna menatal (kiri atau kanan), saya ingin dapat menambahkan lebih banyak maklumat, melaksanakan beberapa jenis "fungsi tatal tak terhingga".

Apabila saya cuba menambahkan div anak baharu di hujung div induk, saya tidak menghadapi sebarang masalah. Walau bagaimanapun, apabila saya cuba menambahkan elemen anak baharu pada permulaan div induk (cth. pengguna ingin melihat kandungan dari hari sebelumnya), tatal berubah selepas menambah elemen baharu, menyebabkan pengguna keliru tentang mengapa skrol berubah.

Saya mencipta biola JS kecil untuk meniru persediaan saya. Cuba klik "Tambah Kiri" dan anda akan melihat gelagat semasa. Adakah terdapat cara untuk menambah elemen baharu tanpa mengubah keseluruhan paparan? https://jsfiddle.net/k75pvey3/3/

P.s. Saya melihat banyak jawapan untuk soalan ini dalam talian. Walau bagaimanapun, semua ini saya lihat menganggap bahawa komponen baru mempunyai lebar tertentu. Dalam kes saya (seperti yang saya cuba tunjukkan dalam biola), saya tidak dapat menentukan lebar div anak yang baru ditambah.

Berikut adalah kod untuk rujukan:

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

Ini ialah 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

Saya ada berita buruk untuk anda, ini biasanya salah satu bahagian senarai maya yang rumit - menambah elemen baharu pada permulaan paksi skrol sambil mengekalkan kedudukan skrol.

Selalunya disyorkan anda menggunakan penyelesaian sedia ada seperti react-virtualized a> 或 react-window.

Jika anda tidak mahu menggunakan perpustakaan sedia ada, satu penyelesaian ialah anda boleh mendengar lebar kandungan di dalam div (cth. Element.scrollWidthdiv 内内容的 width （例如。 Element.scrollWidth)，然后通过设置 .scrollLeft) dan kemudian tetapkannya dengan .scrollLeft Nilai bagi bekas. Walau bagaimanapun, perkara menjadi rumit apabila anda memuatkan semasa menatal, kerana menatal boleh menjadi "dengan inersia", terutamanya pada peranti skrin sentuh/pad sentuh pada komputer riba.

(dari pengalaman, apabila saya terlalu yakin, saya boleh menulis senarai dummy sendiri dan akhirnya menggunakan perpustakaan kerana banyak kes tepi)