React-window: Can`t trigger scroll event when i use FixedSizeList and scroll horizontal

[NexxLuo]

use FixedSizeList ;
scroll horizontal ;
onScroll event not trigger;

[bvaughn]

Sorry, I don't have time to look at bugs that don't include repro code. Please provide a Code Sandbox or similar.

[NexxLuo]

https://codesandbox.io/embed/thirsty-almeida-2bkoq

there is a demo .
you can scroll and see the console

[bvaughn]

Your demo shows a vertical list component. onScroll is only be called when you scroll in the primary direction (in this case, vertical). I can see where the docs might not be detailed enough in this regard.

[cristianounix]

@bvaughn In this case, how can I get the horizontal scroll event ?
i need this to sync this scroll with another div.

[Blkc]

On the there is an outerRef props which you can pass into to get the ref of the container of the list. Originally I thought that would work as I can get the ref dom node and do something like this

const listContainerRef = useRef(null)

 useLayoutEffect(() => {
    if(listContainerRef) {
      listContainerRef.current.addEventListener('scroll', function() {
        //do something with scrollLeft
      })

      return () => listContainerRef.current.removeEventListener('scroll', function() {
        //do soemthing with scrollLeft
      })
    }
  }, [listContainerRef])

<List 
        itemData={{ ItemRenderer: children, stickyIndices }}
        ref={listRef}
        outerRef={listContainerRef}
>

But somehow adding an event listener to the container ref doesn't work in this case so I ended up with the following where I pass in a class name and adding event listener to the document instead.

const listScroll = (e) => { 
    if(e.target.className === 'headless-table-list') {
      //do something with scrollLeft
    }
  }

  useLayoutEffect(() => {
    if(listContainerRef) {
      document.addEventListener('scroll', listScroll, true);

      return () => document.removeEventListener('scroll', listScroll)
    }
  }, [listContainerRef])

<List 
        itemData={{ ItemRenderer: children, stickyIndices }}
        className="headless-table-list"
        ref={listRef}
        outerRef={listContainerRef}
>

Or we are supposed to use Grid instead of List but I am too far down the path with List.