React-window: 무거운 행이있는 FixedSizeList에서 스크롤하는 동안 공백 (8 개의 Material UI 카드가 연속)

스크롤이 처음 시작될 때 이러한 유형의 공백은 안타깝게도이 라이브러리에서 사용하는 창 기술을 사용하는 데 필요한 절충안입니다. 스크롤 핸들러를 강제로 동기화하지 않는 한 (스크롤링이 느리고 사용자에게 버벅 거림을 느끼게 할 것입니다), 우리는 이것을 완전히 피할 수 없습니다.

수행 할 수있는 작업 :

• 행 렌더러를 가능한 한 빨리 만드십시오. 어떤 경우에는 스크롤이 활성화되어있는 동안 더 가벼운 표현 사용을 고려할 수 있습니다 ( 여기 참조).
• 이와 같은 메모 기법을 사용하십시오. 데모는 여기 를 참조
• 다른 overscanRowCount 값으로 실험 해보세요. (당신의 경우 2가 1에 더 잘 작동할까요?)
• 프로파일 러를 사용하여 렌더링 성능을 확인합니다.
• 프로덕션 모드에서 성능을 확인하십시오. (코드 샌드 박스 데모는 훨씬 느린 DEV 모드에서 실행됩니다.)

@bvaughn - @ ashishgupta1989 내가 크롬 플래그를 사용하지 않으면 "스크롤을 부드럽게"발견과 나는 작업은 성능이 아주 좋습니다. 스크롤 핸들러를 동기식으로 만드는 방법은 무엇입니까? _this._onScrollVertical ()의 setState를 requestAnimationFrame ()으로 래핑하려고 시도했지만 플래그 변경과 동일한 영향을 미치지 않았습니다. 동일한 동작을 얻기 위해 구성 요소에 scrollSync 플래그를 설정할 수 있기를

그래서 이것은 작동합니다.

return createElement(outerElementType || outerTagName || 'div', {
    ...
    onWheel: function (e) {
        e.preventDefault()
        e.currentTarget.scrollTop += e.deltaY
    },

이 스택 오버플로 답변에서 영감을 얻었습니다 : https://stackoverflow.com/questions/12747746/how-to-disable-smooth-scrolling-in-chrome

이 수정 사항을 연결하는 새로운 prop scrollSync 로 풀 요청을 제출하면 수락 하시겠습니까?

고려를 위해 풀 요청을 제출하는 것은 언제나 환영합니다. 스크롤 이벤트 핸들러를 강제로 차단하는 것은 API에 대한 지원을 추가하고 싶지 않지만 PR을 읽고 고려할 것입니다.