scrollyfills
scrollyfills copied to clipboard
argyleink
How to use it in React?
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?
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;
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?