how to controll the scroll outside the list

[carolin913]

Hi, recently I use react-window in my project, it works perfect if the scroll event is listened by the List self, but if I wrapped the List with div/Tab, how to hide the list's scrollbar and make the parent div to take control of scrolling? The main part of the code is like this:

<div ref={outerRef} style={{overflow:'auto',height:'200px'}} onScroll={scrollCheck}>
        <Tab
            defaultActiveKey='tab1'
            onChange={(key)=>{ console.log("onChange====",key)}}
            >
                <Tab.TabPane tab="hot" tabKey="tab1" >
                    <FixedSizeList
                        className={'demo'}
                        height={200}
                        itemSize={40} 
                        itemData={itemData}
                        width={300}
                        outerRef={outerRef}
                    />
                </Tab.TabPane>
                <Tab.TabPane tab="newest" tabKey="tab2" >
                    <div style={{background: '#368AD9', color: '#fff', padding: '15px' }}>
                        2...
                    </div>
                </Tab.TabPane>
        </Tab>
    </div>

the render effect is like this, now I have two scrollbars

[korzo-fortegrp]

If you'll use react-virtualized, you can do this with WindowScroller component. For example you can look into it's code to understand how you can do it in react-window. Also you can add event listener to your parent scroll element, add overflow: hidden to your react-window list, and then change list scroll on parent scroll listener.

[311chaos]

I would love to see an example of something like WindowScroller in react-window. I attempted to do something with the scroll listener on the parent, but I ended up with a mess.

I guess I am mostly commenting to follow in the case that someone out there has got this to work with react-window and is willing to share a codesandbox or something.

[martynaskadisa]

You can use WindowScroller component from react-virtualized:
https://codesandbox.io/s/vy620pkzzy

#30

[charkour]

I've been using this package FedericoDiRosa/react-window-scroller

[daanishnasir]

Hmm, is there a way to have the parent/window scroll the list container when using react-window with infinite-loader? That's my issue here, I'm having double scroll bars as well and there seems no documentation on a fix

      `
      <InfiniteLoader` isItemLoaded={isItemLoaded} itemCount={itemCount || 0} loadMoreItems={loadMoreItems}>
        {({ onItemsRendered, ref }) => {
          return (
            <List
              ref={ref}
              height={850}
              innerElementType={innerElementType}
              itemCount={videos.length}
              itemSize={118}
              onItemsRendered={onItemsRendered}
              width={width}
            >
              {row}
            </List>
          );
        }}
      </InfiniteLoader>
      `

[holmberd]

@daanishnasir couple things you can do to achieve this:

• Change the <List/> component overflow to be visible, i.e. <List style={{ overflow: 'visible' }} ... />.
• Map the scroll event from your parent element to the List, i.e. handleScroll = (scrollTop) => listRef.scrollTo(scrollTop);
• Set the height of the parent element to equal the height of your scrollable list and update it as it changes, e.g. collapse/expand.