2024.05.06

CSS+JSでモーダルなどの開閉時のスクロール禁止処理

2024.05.06 12

スマホ環境でハンバーガーメニューを採用しているとき、メニューを開いているときにスクロールを禁止したい場面がちょくちょくあります。

そんな時はこちらのコードで実装を浴していますので参考にしてみてくださいね。

const scrollLock = (scrollabletarget) => {
    let scrollPosition;

    const lockScroll = () => {
        scrollPosition = window.pageYOffset;
        document.documentElement.style.scrollBehavior = 'auto';
        document.body.style.cssText = `
            position: fixed;
            top: -${scrollPosition}px;
            left: 0;
            right: 0;
            width: 100%;
            overflow: hidden;
        `;
    };

    const unlockScroll = () => {
        document.body.style.cssText = '';
        window.scrollTo(0, scrollPosition);
        document.documentElement.style.scrollBehavior = '';
    };

    return { lock: lockScroll, unlock: unlockScroll };

};

/////////////////////////////////////////////////////////
// 使い方例
/////////////////////////////////////////////////////////
// document.addEventListener('DOMContentLoaded', () => {
//     modalEvent();
// });
//
// const modalEvent = () => {
//     const modal = document.getElementById('modal');
//     if (!modal) { return false; }
//
//     const ScrollLockEvent = scrollLock(modal);
//
//     document.getElementById('openModal').addEventListener('click', () => {
//         ScrollLockEvent.lock();
//         modal.style.display = 'flex';
//     });
//
//     document.getElementById('closeModal').addEventListener('click', () => {
//         modal.style.display = 'none';
//         ScrollLockEvent.unlock();
//     });
//
//     modal.addEventListener('click', (event) => {
//         if (event.target === modal) {
//             modal.style.display = 'none';
//             ScrollLockEvent.unlock();
//         }
//     });
// };
/////////////////////////////////////////////////////////