How to use it in React?

[Plazo-09]

No description provided.

[argyleink]

havent tried it, but i bet you could just import this, get a ref to the node you want to get scrollend from, and then use that ref to setup the event listener?

[r100-stack]

havent tried it, but i bet you could just import this, get a ref to the node you want to get scrollend from, and then use that ref to setup the event listener?

At least when I tried it in a playground and testing it in Safari 16.6, the polyfill didn't seem to kick in. When testing in browsers that support scrollend, scrollend worked without the polyfill.

Am I missing something to make the polyfill work in React?

Code

import React from 'react';
import './App.css';
import { scrollend } from 'scrollyfills';

function App() {
  const ref = React.useRef<HTMLDivElement>(null);

  React.useEffect(() => {
    const refCurrent = ref.current;

    const listener = () => {
      console.log('scrollend');
    };

    refCurrent?.addEventListener('scrollend', listener);

    return () => {
      refCurrent?.removeEventListener('scrollend', listener);
    };
  }, []);

  return (
    <>
      <div
        id="scroll-container"
        ref={ref}
        style={{ height: '50vh', overflow: 'auto' }}
      >
        <div
          id="content"
          style={{
            height: '200vh',
            backgroundColor: 'black',
          }}
        >
          <p>Content</p>
        </div>
      </div>
    </>
  );
}

export default App;

[argyleink]

maybe there's a conflict with how React does events. perhaps they're consuming them to the root of the react app (which they've always done) but aren't forwarding the scrollend event?