前提
Webアプリケーションにおいて、PC、Android、iPhoneで同じスクルール終了時のアクションを行いたい
課題
PC、Androidにはscrollendイベントが存在するが、safariには存在しない
対処案
safariの場合のみ分岐させ、scrollイベントでなんとか(※)する
※setTimeoutで100ms後に動作させるイベント登録を行う。継続してscrollイベントが来る場合にはclearした上で、再度登録しなおす
useEffect(() => {
const timeoutFn = () => {
window.clearTimeout(timeoutId);
timeoutId = window.setTimeout(handleScrollEnd, 100);
};
const notIos = 'onscrollend' in window;
if (notIos) {
// For PC,Android
window.addEventListener('scrollend', handleScrollEnd);
} else {
// For IOS
window.addEventListener('scroll', timeoutFn);
}
return () => {
window.removeEventListener('scrollend', handleScrollEnd);
window.removeEventListener('scroll', timeoutFn);
};
}, [handleScrollEnd]);
残課題
100ms後に処理しているため、遅延して処理していることが体感できるレベル
- もっとうまいやり方があれば教えてください