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;
}