[js]スクロールをブロックしたい

やりたいこと

ローディング表示中やアニメーション中にユーザーのスクロールをブロックしたい。

実装

bodyのoverflowをhiddenにすれば良いです！
reactではこんな感じで実装できた。

useEffect(() => {
  if (isScrollable) {
    document.body.style.overflow = "scroll";
  } else {
    document.body.style.overflow = "hidden";
  }
}, [isScrollable]);

うまくいかなかった例

スクロールのブロックはできるが、removeEventLisnerがなぜかうまくいかない。

useEffect(() => {
  const preventScroll = (e) => {
    e.preventDefault()
  }
  if (isScrollable) {
    document.removeEventListener('touchmove', preventScroll, { passive: false 
 });
    document.removeEventListener('wheel', preventScroll, { passive: false });
  } else {
    document.addEventListener('touchmove', preventScroll, { passive: false });
    document.addEventListener('wheel', preventScroll, { passive: false });
  }
}, [isScrollable])

＊ mousewheelは非推奨のためwheelを使っている
https://developer.mozilla.org/en-US/docs/Web/API/Element/mousewheel_event

＊ passiveはスクロールイベントを拾った時にユーザーのスクロールをブロックするかの指定。
https://blog.webico.work/passive-event-listeber01