JavaScriptでscrollの可/不可を切り替える
4534 ワード
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();
};
Author And Source
この問題について(JavaScriptでscrollの可/不可を切り替える), 我々は、より多くの情報をここで見つけました https://zenn.dev/nbr41to/articles/d112293df98d06著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Collection and Share based on the CC protocol