반응하는 데 문제가 있습니다. 가로 스크롤로 볼 수 있는 많은 하위 div가 포함된 간단한 스크롤 가능 div를 구현하려고 합니다.

기본적으로 각 하위 div는 하루에 해당합니다. 이 구성요소는 사용자가 현재 날짜와 다음 날짜에 대한 정보를 처음 볼 때 로드됩니다. 그러나 사용자가 (왼쪽 또는 오른쪽) 스크롤하는 경우 일종의 "무한 스크롤 기능"을 구현하여 더 많은 정보를 추가할 수 있기를 바랍니다.

부모 div 끝에 새 자식 div를 추가하려고 하면 아무런 문제가 없습니다. 그러나 상위 div의 시작 부분에 새 하위 요소를 추가하려고 하면(예: 사용자가 이전 날짜의 콘텐츠를 보려는 경우) 새 요소를 추가한 후 스크롤이 변경되어 사용자가 왜 스크롤이 변경 중입니다.

내 설정을 복제하기 위해 작은 JS 바이올린을 만들었습니다. "왼쪽 추가"를 클릭하면 현재 동작을 볼 수 있습니다. 전체 보기를 변경하지 않고 새 요소를 추가하는 방법이 있습니까? https://jsfiddle.net/k75pvey3/3/

P.s. 저는 이 질문에 대한 답변을 온라인에서 많이 봤습니다. 그러나 내가 본 모든 것들은 새로운 구성 요소가 특정 너비를 가지고 있다고 가정합니다. 제 경우에는(바이올린에 표시하려고 하므로) 새로 추가된 하위 div의 너비를 결정할 수 없습니다.

참조용 코드는 다음과 같습니다.

CSS는 다음과 같습니다.

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