JavaScriptでscrollの可/不可を切り替える

JavaScriptでscrollの可/不可を切り替える

Modalなどを実装したときに,Modalが開いているときにscrollをすると,後ろの画面がscrollしてしまうことってあるかなと思うのですが,それを解決する方法を書いておきます.

以下の関数を用意し,Modalを開くときにscrollDisableを,閉じるときにscrollableを実行すればOK

/* Scroll不可 */
export const scrollDisable = () => {
  document.addEventListener('mousewheel', callback, { passive: false }); // PC
  document.addEventListener('touchmove', callback, { passive: false }); // SP
};

/* Scroll可 */
export const scrollable = () => {
  document.removeEventListener('mousewheel', callback, { capture: false }); // PC
  document.removeEventListener('touchmove', callback, { capture: false }); // SP
};

const callback = (event: Event) => {
  event.preventDefault();
};