React-window: 반응 창으로 사용자 정의 스크롤바 반응

이 라이브러리와 react-virtualized 은 완전히 다른 구현입니다. react-virtualized 문제에서 볼 수있는 일반적인 기술은 종종 접근 방법에 대한 유용한 힌트를 제공 할 수 있지만 이와 같은 구체적인 구현 세부 사항은 적용 할 수 없습니다. ( react-virtualized 에서 List 는 Grid 구성 요소를 장식합니다. react-window 에서는 성능과 크기를 개선하기 위해 별도의 구성 요소입니다.)

react-custom-scrollbar 와 같은 것이 react-window 와 (와) 함께 작동할지 모르겠습니다. 솔직히 말해서 지원하고 싶은 것은 아닙니다. 커스텀 스크롤바는 성능에 미치는 영향 때문에 일반적으로 나쁜 생각이기 때문입니다. 그래서이 문제를 마무리하겠습니다.

그러나 후속 질문이 있으면 계속 채팅 할 수 있습니다 😄

이것에 대해 뭔가 알아낼 것입니다. react-window 사용에 관심이 있습니다. 가볍고 문제를 해결하기 때문입니다. 나도 사용자 지정 스크롤바를 사용하는 것을 좋아하지 않지만 내 손 안에 있지 않으므로 스크롤바에 대한 사용자 지정 디자인이 필요합니다.

최악의 경우 react-virtualized 합니다.
감사 :)

@ Rahul-Sagore 당신은 react-window 와 함께 작동하는 사용자 정의 스크롤바를 얻었습니까?

아니, 그럴 시간이 없었어. 확인하고 알아낼 필요가 있습니다.

@bvaughn 이 https://codesandbox.io/s/00nw2w1jv

더 나은 방법은 Scrollbars 를 outerElementType

const CustomScrollbars = ({ onScroll, forwardedRef, style, children }) => {
  const refSetter = useCallback(scrollbarsRef => {
    if (scrollbarsRef) {
      forwardedRef(scrollbarsRef.view);
    } else {
      forwardedRef(null);
    }
  }, []);

  return (
    <Scrollbars
      ref={refSetter}
      style={{ ...style, overflow: "hidden" }}
      onScroll={onScroll}
    >
      {children}
    </Scrollbars>
  );
};

const CustomScrollbarsVirtualList = React.forwardRef((props, ref) => (
  <CustomScrollbars {...props} forwardedRef={ref} />
));

// ...

<FixedSizeList
  outerElementType={CustomScrollbarsVirtualList}
  {...rest}
/>

예 https://codesandbox.io/s/vmr1l0p463

outerElementType 또는 innerElementType 사용하여 얼마나 많은 고급 기능을 사용할 수 있는지 정말 좋아합니다.

반응 창 하단의 스크롤 위치를 감지하려고합니다.
가능할까요? 그것에 대한 아이디어가 있습니까? codesandbox 예제를 갖고 싶습니다.

사용 가능한 ref props를 사용하여 scrollHeight @rufoot 목록을 요청할 수 있습니다.

나는 소품에서 scrollHeight 을 사용하려고했습니다. 그러나 나는 그것에 scrollHeight 속성이 없다고 생각합니다.
@bvaughn 그것에 대해 어떤 생각이 있습니까?

https://codesandbox.io/s/github/bvaughn/react-window/tree/master/website/sandboxes/scrolling-to-a-list-item

scrollToRow200Auto = () => { this.listRef.current.scrollToItem(200); console.log("current position = ", this.listRef.current.props.scrollHeight) };

현재 위치 = 정의되지 않음

@rufoot 뭔가 https://codesandbox.io/s/4zjwwq98j4 ?

https://codesandbox.io/embed/jzo2lool2y

반응 창 하단에서 아래로 스크롤하면 하나의 경고를 볼 수 있습니다.

@piecyk outerElementType 솔루션을 시도했지만 매우 느립니다.

react-scrollbars-custom 시도했습니다. 덜 느리지 만 여전히 느립니다. 누군가 사용자 지정 스크롤 막대를 사용하여 지연에 문제가 있습니까?

@ jancama2 는 그것을 배틀

@rufoot 뭔가 https://codesandbox.io/s/4zjwwq98j4 ?

구현을 사용하고 있지만 forwardedRef가 함수가 아니라는 오류가 발생합니다.

내가 해결하려는 앱의 문제는 항목 목록이 많고 항목을 클릭하면 앱이 다른 경로로 리디렉션되므로 스크롤 위치 (아마도 redux에서)를 추적해야합니다. 그런 다음 경로 변경 후 스크롤 위치를 설정하십시오.

@piecyk 를 react-window-infinite-loader 의 InfiniteLoader와 결합 해 보셨나요 ?
react-scrollbars-custom 하고 있으며 무한 로더가 깨지는 것 같습니다.

내 코드 :

<InfiniteLoader isItemLoaded={isItemLoaded} itemCount={items.total} loadMoreItems={loadMoreItems}>
      {({
        onItemsRendered,
        ref,
      }: {
        onItemsRendered: (props: ListOnItemsRenderedProps) => any;
        ref: React.Ref<any>;
      }) => (
        <List
          height={TABLE_HEIGHT}
          width={width}
          itemCount={items.total}
          itemSize={ROW_HEIGHT}
          onItemsRendered={onItemsRendered}
          itemData={{ items }}
          ref={ref}
          outerElementType={Scrollbar}
        >
          {Row}
        </List>
      )}
    </InfiniteLoader>

업데이트 : 무한 스크롤 구성 요소와 관련이 있다고 생각하지 않습니다. 사용자 정의 스크롤바에서 작동하도록 할 수 없습니다.

누군가가 react-scrollbars-custom 구현을 나와 공유 할 수 있다면 감사하겠습니다.

@ranihorev 그 패키지를 사용해야합니까? 위에서 공유 한 코드 펜 @piecyk 는 react-custom-scrollbars를 사용하며 잘 작동합니다 (ref를 생성 할 때 예외, 어떤 이유로 내 코드에서 null 인 경우)

알겠습니다. 다시 묻겠습니다. @piecyk 위의 코드 샘플을 사용하고 있습니다 ( @simjes에 답장 한
<TreeRoot onDragOver={e => this.onDragOver(e)} > <AutoSizer> {({ height, width }) => ( <List treeRef={this.props.treeRef} width={width} height={height} itemSize={index => rowHeights[index]} itemCount={nodeTree.length} itemData={{ nodeTree, expandedNodes, nodesFetching, nodesFetchingFailed, selectedNode, selectedNodeId, resetRowHeight: this.resetRowHeight, }} outerElementType={TreeScrollbar} outerRef={this.props.outerRef} onScroll={({ scrollOffset, scrollUpdateWasRequested }) => { if (scrollUpdateWasRequested) { console.log('scrollOffset: ', scrollOffset); } }} > {Node} </List> )} </AutoSizer> </TreeRoot>

CustomScrollbars 및 CustomScrollbarsVirtualList를 사용자와 동일하게 구현하지만 ref는 항상 null입니다. AutoSizer와 부모를 사용하는 구성 요소에서 ref를 만들려고 시도했지만 항상 null입니다. 이유를 이해하는 데 도움을 주시면 감사하겠습니다. 위에서 언급했듯이 스크롤 위치를 추적하고 목록이 맨 위로 이동하지 않도록 내 앱의 경로 변경에 설정할 수 있어야합니다.

@ChristopherHButler 이미 내 코드에서 해당 패키지를 여러 번 사용하고 있으므로 동일한 패키지를 계속 사용하고 싶습니다. I 솔루션은 매우 유사하지만 새 데이터를 ptoperly 가져 오지 않습니다.

@ChristopherHButler 는 문제의 코드 샌드 박스 예제 없이는 말하기가 정말 어렵습니다. 무언가를 공유 할 수 있습니까?
여기서 기본 아이디어는 react-custom-scrollbars에서 ref를 설정하여 react-window가

AutoSizer 또는 VariableSizeList는이 예제에서와 같이이 접근 방식으로 작동합니다.
https://codesandbox.io/s/react-window-custom-scrollbars-t4352

@ranihorev 코드 샌드 박스 예제도 공유 할 수 있습니까?

@piecyk 간단한 (그리고 깨진) 예제를 만듭니다.
https://codesandbox.io/s/bvaughnreact-window-fixed-size-list-vertical-64kzh?fontsize=14

나는 또한 다른 변형을 시도했지만 (예 : 참조를 스크롤러 래퍼로 설정) 성공하지 못했습니다 ...

감사!

@ranihorev 이 접근 방식은 사용자 지정 스크롤 구현에 관계없이 동일합니다. 스크롤을 담당하는 동일한 요소에 대한 참조를 설정하고 해당 스크롤 이벤트를 처리해야합니다.

react-scrollbars-custom 는 렌더링 소품 패턴을 사용하여 더 좋은 API를 제공하므로 https://codesandbox.io/s/bvaughnreact-window-react-scrollbars-custom-pjyxs 와 같은 작업을 수행 할 수 있습니다.

프로파일 링을하지 않았습니다. 도움이 되었기를 바랍니다.

@piecyk 여기에서 데모 작업을하고 있습니다 : https://codesandbox.io/s/4zjwwq98j4 . 스크롤 위치를 설정할 수 있도록 onScrollStop을 사용하여 redux에서 작업을 전달하고 싶습니다 (이 스레드의 아이디어 : https://github.com/malte-wessel/react-custom-scrollbars/issues/146 이지만 onScrollStart 및 onScrollStop이 내 코드 나 데모에서 작동하지 않는 것 같습니다. 그 이유를 알고 있습니까? 목록에서 스크롤바로 소품을 전달할 수있는 방법이 있습니까?

@ChristopherHButler 최선의 선택은 컨텍스트를 사용하여 소품을 전달하는 것입니다.

https://codesandbox.io/s/bvaughnreact-window-fixed-size-list-vertical-v2-usi1m

--- 편집 됨
경로가 변경 될 때 전체 목록을 마운트 해제하면 작업을 전달할 수 있습니다. Last scrollOffset은 ref에 저장되고 VariableSizeList의 onScroll: function 를 사용하여 모든 스크롤 변경시 업데이트 될 수 있습니다. 그러면 소품을 Scrollbars에 전달할 필요가 없습니다.

@piecyk 굉장합니다, 감사합니다!
btw, 필요한 것은 onScroll 함수 (내가 놓친) 뿐이고 ref를 전달할 필요가 전혀없는 것 같습니다.
https://codesandbox.io/s/bvaughnreact-window-react-scrollbars-custom-99dn1

@piecyk 죄송합니다. VariableSizeList의 구현이 AutoSizer에 래핑되어 있고이를 렌더링하는 구성 요소는 클래스 기반 구성 요소이므로 컨텍스트를 사용할 수 있는지 확실하지 않습니다. 이것이 내가 onScrollStop을 작동시킬 수없는 이유일까요?

빠른 업데이트:
구성 요소 상태를 추가하고 onScroll로 설정했습니다.

`
class BaseTree extends Component {
...
상태 = {scrollPosition : 0,};
...
listRef = React.createRef ();
outerRef = React.createRef ();
...
render {
const {노드, nodesFetching, nodesFetchingFailed, extendedNodes, selectedNode} = this.props;
반환 (

{({높이, 너비}) => (
ref = {this.listRef}
className = "목록"
outerRef = {this.outerRef}
outerElementType = {TreeScrollbar}
너비 = {너비}
높이 = {높이}
onScroll = {({scrollOffset}) => this.setState ({scrollPosition : scrollOffset})}
itemSize = {index => rowHeights [index]}
itemCount = {nodeTree.length}
itemData = {{
nodeTree,
extendedNodes,
nodesFetching,
nodesFetchingFailed,
selectedNode,
selectedNodeId,
resetRowHeight : this.resetRowHeight,
}}
>
{마디}

)}

);
}}

const mapStateToProps = 상태 => ({
scrollPosition : selectors.getTreeScrollPosition (state),
});

const mapDispatchToProps = dispatch => ({
setTreeScrollPosition : position => dispatch (actions.setTreeScrollPosition ({position})),
});

기본 연결 내보내기 (mapStateToProps, mapDispatchToProps) (BaseTree);
`

그런 다음 componentWillUnmout에서 다음과 같이 redux에서 위치를 설정하는 작업을 전달합니다.

componentWillUnmount() { this.props.setTreeScrollPosition(this.state.scrollPosition); }

내 유일한 문제는 구성 요소가 다시 장착 될 때 스크롤 위치를 설정할 수 있다는 것입니다. 다음과 같이 this.listRef에서 scrollTop 메서드에 액세스 해 보았습니다.

this.listRef.current.scrollTop() 하지만 함수가 아니라는 오류가 발생합니다. 스크롤 위치를 설정하는 데 사용할 수있는 속성 (this.listRef 또는 this.outerRef)을 잘 모르겠습니다. 다음과 같이 BaseTree의 componentDidMount에서 설정할 수 있다고 생각했습니다.
componentDidMount() { const { scrollPosition } = this.props; if (this.listRef.current) { // console.log('initializing scroll position to : ', scrollPosition); this.listRef.current.scrollTop(scrollPosition); } }
이 작업에 도움을 주시면 대단히 감사하겠습니다!
편집 : 미안하지만 내 코드가이 편집기에서 올바르게 서식을 지정하지 않는 것 같아서 사과드립니다.

@ranihorev forward ref 반응 창에 scrollTo, scrollToItem 같은 기능이 작동해야합니다.

@ChristopherHButler 컨텍스트는 문서에서 빌드 된대로 정확하게 작동해야합니다.

컨텍스트는 모든 레벨에서 수동으로 소품을 전달할 필요없이 구성 요소 트리를 통해 데이터를 전달할 수있는 방법을 제공합니다.

그러나 예전에 언급했듯이 경로 변경시 전체 구성 요소를 마운트 해제하면 소품을 전달할 필요가 없습니다. 스크롤이 발생하는 동안 필요하지 않기 때문에 상태에 scrollPosition 를 저장하지 않고, 다시 렌더링하지 않고 ref에 저장합니다.

onScroll={({ scrollOffset }) => this.setState({ scrollPosition: scrollOffset })}

// to 

lastScrollOffsetRef = React.createRef(0);

<List
  onScroll={({ scrollOffset }) => {
    this.lastScrollOffsetRef.current = scrollOffset
  }}
  // ...rest
/>

// then in 
componentWillUnmount() { 
  this.props.setTreeScrollPosition(this.lastScrollOffsetRef.current); 
}

outerRef 에 관해서는 귀하의 경우에는 필요하지 않습니다. listRef.current.scrollTo 는 사용하려는 올바른 방법입니다. componentDidMount 에서 메서드를 호출하는 아이디어가 정확하고 작동해야합니다.

https://codesandbox.io/s/bvaughnreact-window-fixed-size-list-vertical-80zo7

refs를 설정하는 동안 타이밍 문제처럼 보입니다. AutoSizer가 this.listRef.current를 정의되지 않게 만드는 List 렌더링을 지연시킬 수 있습니다.

hacky 옵션은 setTimeout으로 반응 라이프 사이클을 중단하고 다음 틱에서 ref를 호출하는 것입니다.

componentDidMount() {
  window.setTimeout(() => {
    if (this.listRef.current) {
      this.listRef.current.scrollTo(this.props.scrollPosition);
    }
  }, 0);
}

@piecyk 도움을 주셔서 감사합니다, 정말 감사합니다 :)

감사합니다 @piecyk 작동하는 것 같습니다. 경로 변경 후 마운트에 약간의 깜박임이 있지만 함께 살 수 있습니다 :) 또한 className을 사용하여 scrollPosition을 전달하고 CustomScrollbars의 refSetter에 scrollTop을 설정하는 또 다른 해킹을 시도했습니다.
if (scrollbarsRef) { forwardedRef(scrollbarsRef.view); // HACK scrollbarsRef.scrollTop(className); }
잘 작동하는 것 같습니다.
모든 도움에 다시 한번 감사드립니다. 대단히 감사합니다 !! 🙌🏻

안타깝게도이 문제의 모든 예제가 제대로 작동하지 않습니다 (때로는 마우스가 스크롤에 응답하지 않음).

그러나이 예제는 완벽하게 작동합니다!

@ranihorev 이 접근 방식은 사용자 지정 스크롤 구현에 관계없이 동일합니다. 스크롤을 담당하는 동일한 요소에 대한 참조를 설정하고 해당 스크롤 이벤트를 처리해야합니다.

react-scrollbars-custom 는 렌더링 소품 패턴을 사용하여 더 좋은 API를 제공하므로 https://codesandbox.io/s/bvaughnreact-window-react-scrollbars-custom-pjyxs 와 같은 작업을 수행 할 수 있습니다.

react-scrollbars-custom 시도했습니다. 덜 느리지 만 여전히 느립니다. 누군가 사용자 지정 스크롤 막대를 사용하여 지연에 문제가 있습니까?

해냈어? 최종 해결책은 무엇입니까?

이것이 누구에게나 도움이된다면 OverlayScrollbars 와 함께 작동하도록 관리했습니다. 스크롤 이벤트를 해당 요소에 전달하기 만하면됩니다. 방법은 다음과 같습니다.

const Overflow = ({ children, onScroll }) => {
  const ofRef = useRef(null);

  useEffect(() => {
    const el = ofRef.current.osInstance().getElements().viewport;

    if (onScroll) el.addEventListener('scroll', onScroll);

    return () => {
      if (onScroll) el.removeEventListener('scroll', onScroll);
    };
  }, [onScroll]);

  return (
    <OverlayScrollbarsComponent
      options={options}
      ref={ofRef}
    >
      {children}
    </OverlayScrollbarsComponent>
  );
};

그런 다음 가상화 된 구성 요소에서 :

<FixedSizeGrid
  {...props}
   outerElementType={Overflow}
>

나는 이것을 FixedSizeGrid 와 함께 사용하고 있지만 목록에 대해서도 동일하게 작동합니다.

도움이되기를 바랍니다.