@af-utils/scrollend-polyfill cannot use in React18
Ge-yuan-jun opened this issue · 8 comments
the npm package @af-utils/scrollend-polyfill
cannot use in React18 when addEventListener to ref
useEffect(() => {
const scrollendCb = () => {
console.log('scrollend trigger');
};
myRef?.current?.addEventListener('scrollend', scrollendCb);
return myRef?.current?.removeEventListener('scrollend', scrollendCb);
}, []);
if (arguments[0] === SCROLLEND_EVENT) {
fn.apply(this, arguments as any);
}
the arguments[0] equals to react-scroll
,not scrollend
You already managed to solve it?
Not yet, I'm trying. May you provide some suggestions ?
I need to investigate this, will do this approximately in 1hr, could you please provide some additional information like:
- browser
- packages installed / libraries used
I use the pkg in webview. I already debug the code.
I have bind scroll & touchend in the jsx
when i comment the onScroll
& onTouchEnd
, the scrollend
still cannot be triggered
<div
id="container"
ref={myRef}
onScroll={onScroll}
onTouchEnd={handleTouchEnd}
>
the blow code has triggered twice when the page init
const patchScrollEnd = <T extends ListenerMethod>(
objects: readonly PolyfilledTarget[],
method: T,
fn: (
this: PolyfilledTarget,
type: string,
listener: PossibleListenerType,
options?: AddEventListenerOptions
) => void
) =>
objects.forEach(object => {
const originalMethod = object[method];
object[method] = function () {
originalMethod.apply(this, arguments as any);
if (arguments[0] === SCROLLEND_EVENT) {
// the blow code has triggered when the page init
console.log('patchScrollEnd trigger');
fn.apply(this, arguments as any);
}
};
});
but, the code blow cannot be triggered
addEventListener(
'touchend',
e => {
for (const touch of e.changedTouches) {
if (pointers.delete(touch.identifier) && lastTarget && !pointers.size) {
// // the blow code cannot be triggered when I touchend
console.log('touchend dispatch');
dispatchScrollEvent(lastTarget);
lastTarget = null;
}
}
},
{ passive: true }
);
the touchend callback cannot be triggered because the lastTarget
always be null
addEventListener(
'touchend',
e => {
for (const touch of e.changedTouches) {
// the lastTarget always be null
if (pointers.delete(touch.identifier) && **lastTarget** && !pointers.size) {
dispatchScrollEvent(lastTarget);
lastTarget = null;
}
}
},
{ passive: true }
);
emmm, this is a stupid issue.
I already solve it.
useEffect(() => {
myRef?.current?.addEventListener('scrollend', scrollendCb);
// it should return function
return () => myRef?.current?.removeEventListener('scrollend', scrollendCb);
}, []);
Added example for this polyfill, so you could always try it online now
https://af-utils.vercel.app/scrollend-polyfill/examples/react