2
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

scrollendイベントをiosでも処理したい

Last updated at Posted at 2024-08-17

前提

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後に処理しているため、遅延して処理していることが体感できるレベル

  • もっとうまいやり方があれば教えてください
2
2
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?