iosでスクロールを一時的に禁止したい時のjs

こんにちはレターズです。茨城県水戸市でホームページと動画制作を行っています。

さてさて、今回は意外とハマりがち？なiosでのスクロール一時禁止処理です。
アンドロイドだけで確認しているとどうしても見落としがちです。

アンドロイドだと、bodyに

body.is_fixed {
    overflow: hidden;
}

で解決してしまったりするのですが、、これがiosでは効かない。
そこで下記jsを使います。

スクロール停止したい時のトリガーをきっかけに下記を実行

①スマフォのタッチイベントを無効化する関数を用意

function handleTouchMove(event) {
      event.preventDefault();
    }

②トリガークリックで下記実行

//get scroll amount
        const scroll_position = getScrollAmount();
        //set body to fixed
        body.classList.add("is_fixed");
        //set body top to scroll amount
        body.style.top = -scroll_position + "px";
        //add touchmove event
        document.addEventListener("touchmove", handleTouchMove, {
          passive: false,
        });

 　　　　//prevent scroll
        document.addEventListener("touchmove", handleTouchMove, {
          passive: false,
        });


  //
  //return scroll amount
  getScrollAmount: () => {
    //return window scroll amount
    const body = document.querySelector("body");
    return (
      window.pageYOffset ||
      document.documentElement.scrollTop ||
      body.scrollTop ||
      body.getAttribute("data-scroll-amount") ||
      0
    );
  },

③スクロール停止をリセットする時は下記を実行

 // get scroll position
        const scroll_position = parseInt(body.style.top);
        // reset scroll position
        body.style.top = "";
        // toggle body fixed class
        body.classList.remove("is_fixed");
        // scroll to the top
        window.scrollTo(0, scroll_position * -1);
        //reset scroll
        document.removeEventListener("touchmove", handleTouchMove, {
          passive: false,

//reset scroll
        document.removeEventListener("touchmove", handleTouchMove, {
          passive: false,
        });

といった形です。

④スクロールに下記イベントを実行させます。

  //
  // add body the scroll amount value as style top
  addScrollAmount: () => {
    const body = document.querySelector("body");
    body.setAttribute(
      "data-scroll-amount",
      window.pageYOffset ||
        document.documentElement.scrollTop ||
        body.scrollTop ||
        0
    );
  },

  // scroll event
  window.addEventListener("scroll", function () {
  
    jots.addScrollAmount();
  });
})();