React-window: 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

https://github.com/bvaughn/react-window/issues/30