スクロール禁止機能の実装 – R.P.BLOG

スクロール禁止機能の実装

2021/02/04

2021/02/04

今回はスクロール禁止機能を実装する方法を紹介します。

<サンプルコード>

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

document.addEventListener('mousewheel', Scroll_ban, { passive: false });
document.removeEventListener('mousewheel', Scroll_ban, { passive: false });

中身の解説をしていきます。

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

まず”Scroll_ban”という関数を設定します。
preventDefaultというメソッドを使用します。これはブラウザ上の操作(例えば画面のスクロールや文字入力など)を無効化するというものです。

document.addEventListener('mousewheel', Scroll_ban, { passive: false });

これは対象のドキュメントがスクロールされたときに”Scroll_ban”関数を呼び出し実行するというものです。

passive: false

上記のコードで”Scroll_ban”の対象として認識?させます。このコードを書かないと、

passive: true

trueで処理され”Scroll_ban”が実行されなくなってしまいます。



<実装例>

<body>
    <div class="btn">ボタン</div>
    <script src="script.js"></script>
</body>
const BUTTON = document.querySelector('.btn');

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

BUTTON.addEventListener('click', function (e) {
    BUTTON.classList.add('is-active');
    document.addEventListener('mousewheel', Scroll_ban, { passive: false });
});

BUTTON.addEventListener('click', function (e) {
    if (e.target.classList.contains('is-active')) {
        e.target.classList.remove('is-active');
        document.removeEventListener('mousewheel', Scroll_ban, { passive: false });
    }
});




今回はこれでおしまいです。この記事が皆さんのお役に立てれば幸いです。

この記事をシェアする

コメントは受け付けていません。

自己紹介

髙橋

WEBデザイン学科

HTMLとCSS、PHPを勉強中

カテゴリー

アーカイブ

© 2020 Takahashi