React-window: Windowscroller

WindowScroller 은 (는) 구성 요소를 유지 관리하는 데 어려움을 겪은 것 중 하나였습니다. 나는 그것의 유용성을 보지만 다른 것을 유지하는 데 관심이 있는지 잘 모르겠습니다. 대신 가능하다면 반응 창 위에이 기능을 구현하는 외부 구성 요소를 빌드하고 별도로 게시하는 것을 선호합니다.

얼마나 복잡한 지에 따라 그러한 구성 요소가 존재한다면 반응 창을 지원하기 위해 몇 가지 변경을 기꺼이 할 수 있습니다.

누군가 (귀하?)가이 라이브러리에 직접 추가하는 PR을 제출하는 것이 좋은 초기 시작일 수 있습니다. 따라서 별도로 게시하는 것이 얼마나 복잡한 지 알 수 있습니다.

창 스크롤러가 정말로 필요한 경우 react-virtalized 중 하나를 사용할 수 있습니다.

WindowScroller
https://codesandbox.io/s/vy620pkzzy

동적 콘텐츠가있는 WindowScroller
https://codesandbox.io/s/xvl23p7okp

나는 그것에 대해 어떤 조치도 취할 계획이 없기 때문에 지금 당장은이 문제를 마무리 할 것이라고 생각합니다. 그리고 장기 계획 (적어도 마음 속으로는)은 어쨌든 별도의 모듈이었습니다. 그래도 제안서를 살펴보면 기쁩니다!

Hu @PascalSenn , 성공적으로 반응 가상화 된 WindowScroller를 사용하고 있습니까? 미리 감사드립니다

안녕하세요 @PascalSenn , 그리드로 접근 방식을 시도하고 있지만 저에게 도울 수 있니?

미리 감사드립니다

안녕하세요.
문제를 해결하려면 Grid의 경우 Lists 이외의 다른 매개 변수 서명을 제공해야 함을 설명하는 문서를 폴백해야합니다.
scrollTo({scrollLeft: number, scrollTop: number}) => https://react-window.now.sh/#/api/FixedSizeGrid

이것이 도움이되기를 바랍니다 ...
참고 : @PascalSenn 의 CSS 트릭을주의

// This height will override the window.innerHeight set in JSX : height={window.innerHeight}
.window-scroller-override {
  height: 100% !important;
}

도움을 제공하기 위해 여기에 Grid 작업 샘플이 있습니다. https://codesandbox.io/s/wq301o8qz7

창 스크롤러가 정말로 필요한 경우 react-virtalized 중 하나를 사용할 수 있습니다.

WindowScroller
https://codesandbox.io/s/vy620pkzzy

동적 콘텐츠가있는 WindowScroller
https://codesandbox.io/s/xvl23p7okp

참고로이 예제를 고려하는 모든 사람은 window.innerWidth 및 window.innerHeight 의 사용은 스크롤바의 존재를 고려하지 않습니다. 브라우저 / 장치에 따라 달라지는 스크롤바 크기 (그리고 이것이 표시하기에 충분한 콘텐츠인지 여부)는 공제되어야합니다.

@bvaughn , 롤링 속도를 제어 할 수 있습니까? 너무 빠른 슬라이딩과 요소없이 렌더링을 방지하려면 가상 목록이 매우 필요합니다.

@kgregory , 이것이 InfiniteLoader 어떻게 작동하는지 아십니까? 제공하는 예에서 WindowScroller 의 onScroll 는 외부 범위에서 생성되고 List 적용된 참조를 사용하지만 InfiniteLoader 를 사용하는 경우 InfiniteLoader 대한 자식 콜백은 인수에서 ref 를 가져와 _that_을 List 합니다. 두 요구 사항에 대해 동일한 참조를 사용하는 것이 가능하지 않은 것 같습니다. 지금까지 시도한 모든 것이 작동하지 않았습니다.

@mrdanimal InfiniteLoader에서 가져온 참조로 목록 참조를 참조하려면이 답변을 참조하십시오. https://github.com/bvaughn/react-window/issues/417#issuecomment -583867845

@PascalSenn 의 코드 샌드 박스에서 몇 가지 문제를 해결할 수 있었지만 결국 내 프로젝트와 관련된 몇 가지 사항을 테스트하기 위해 두 가지 문제를 해결했습니다. 누구에게나 유용 할 경우를 대비하여 여기에 게시하고 있습니다.

FixedSizeList 예제 : https://codesandbox.io/s/react-window-with-windowscroller-fixedsizelist-xujgi
VariableSizeGrid 예제 : https://codesandbox.io/s/react-window-with-windowscroller-variablesizegrid-7kbwn

DynamicSizeList에서 작동하지 않는 것 같습니다. 누구든지 해결 방법을 알고 있습니까? 그것은 나에게 많은 문제를 구할 것입니다