今回はスクロール禁止機能を実装する方法を紹介します。
<サンプルコード>
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: truetrueで処理され”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 });
}
});
今回はこれでおしまいです。この記事が皆さんのお役に立てれば幸いです。