Question 276800 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – onScroll is not working after React 18 upgrade

The onScroll callback(scrollHandler) is not getting called while scrolling. This issue is happening after we upgraded to react 18 from react 16.

Package details

"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-virtualized": "^9.13.0",

Code snippet

const TableComponent = (props) => {
  let { scrollHandler, getRow, width, height, rowCount, rowHeight, getRow } = props;

  return (
    <div
      onScroll={scrollHandler}
    >
      <AutoSizer>
        {({ width, height }) => {
          return (
            <List
              width={width}
              height={height}
              rowCount={rowCount}
              rowHeight={rowHeight}
              rowRenderer={getRow}
              columnWidth={150}
              style={{ maxHeight: maxHeight }}
            />
          );
        }}
      </AutoSizer>
    </div>
  );
};

I tried to directly add in the autosizer. I tried to add in the eventListener using ref to the tag. But none it worked.
Is there anyways to make onScroll work ?

Tags:

2

Answers


  1. 0

    Have you tried adding overflow: 'scroll' to your parent div style where onScroll prop have been set?

    Login or Signup to reply.
  2. 0

    You can try an event listener if ‘onscroll’ is not working.

      useEffect(() => {
  const handleScroll = event => {
    console.log('hello scroll listener', event);
  };

  window.addEventListener('scroll', handleScroll);

  return () => {
    window.removeEventListener('scroll', handleScroll);
  };
  }, []);

    This code will add a listener to your window and trigger your ‘handleScroll’ function when the window is scrolled.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search