스크롤 상태를 건드리지 않고 React의 div 상단에 추가

Question

반응하는 데 문제가 있습니다. 가로 스크롤로 볼 수 있는 많은 하위 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"))

Answer 1

안 좋은 소식이 있습니다. 이는 일반적으로 가상 목록의 복잡한 부분 중 하나입니다. 스크롤 위치를 유지하면서 스크롤 축 시작 부분에 새 요소를 추가하는 것입니다.

일반적으로 react-virtualized 或 react-window과 같은 기존 솔루션을 사용하는 것이 좋습니다.

기존 라이브러리를 사용하고 싶지 않은 경우 한 가지 해결 방법은 div 내부 콘텐츠의 너비를 들을 수 있다는 것입니다(예: Element.scrollWidthdiv 内内容的 width （例如。 Element.scrollWidth)，然后通过设置 .scrollLeft) 그런 다음 < a href="https:/ /developer.mozilla.org/en 보상 - US/docs/Web/API/Element/scrollLeft" rel="nofollow noreferrer">.scrollLeft 컨테이너. 그러나 스크롤하는 동안 로드하면 상황이 복잡해집니다. 특히 노트북의 터치스크린 장치/터치패드에서 스크롤은 "관성"이 있을 수 있기 때문입니다.

(경험상 자신감이 넘치면 스스로 더미리스트를 작성하다가 극단적인 경우가 많아 라이브러리를 사용하게 되는 경우도 있습니다.)