Webページでスクロールを禁止する方法を紹介します。
スクロールができるWebページでスクロールを禁止させたい場合があります。スクロールを禁止する方法はいくつかありますが、
この記事では、マウスホイールのブロック、タッチによる操作のブロック、カーソルキーのブロック、スクロールバーの非表示をしてスクロールを禁止する方法を
紹介します。
下記のHTMLファイルを作成します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
function LockScroll() {
document.addEventListener("mousewheel", handleMouseWheel, { passive: false });
document.addEventListener("touchmove", handleTouchMove, { passive: false });
document.addEventListener("keydown", handleKeyDown, { passive: false });
document.body.style.overflow = "hidden";
}
function UnLockScroll() {
document.removeEventListener("mousewheel", handleMouseWheel, { passive: false });
document.removeEventListener("touchmove", handleTouchMove, { passive: false });
document.removeEventListener("keydown", handleKeyDown, { passive: false });
document.body.style.overflow = "visible";
}
function handleMouseWheel(e) {
e.preventDefault();
}
function handleTouchMove(e) {
e.preventDefault();
}
function handleKeyDown(e) {
switch (e.keyCode) {
case 0x25:
case 0x26:
case 0x27:
case 0x28:
e.preventDefault();
break;
}
}
</script>
<style>
#frame1 {
height: 120px;
border: 1px solid #ff0000;
}
#frame2 {
height: 120px;
border: 1px solid #ff6a00;
}
#frame3 {
height: 120px;
border: 1px solid #ffd800;
}
#frame4 {
height: 120px;
border: 1px solid #4cff00;
}
#frame5 {
height: 120px;
border: 1px solid #00ffff;
}
#frame6 {
height: 120px;
border: 1px solid #0094ff;
}
#frame7 {
height: 120px;
border: 1px solid #4800ff;
}
#frame8 {
height: 120px;
border: 1px solid #b200ff;
}
#frame9 {
height: 120px;
border: 1px solid #ff00dc;
}
#frame10 {
height: 120px;
border: 1px solid #000000;
}
</style>
</head>
<body>
<p><a href="javascript:LockScroll();">スクロールをロック</a></p>
<p><a href="javascript:UnLockScroll();">スクロールをアンロック</a></p>
<div id="frame1">枠1</div>
<div id="frame2">枠2</div>
<div id="frame3">枠3</div>
<div id="frame4">枠4</div>
<div id="frame5">枠5</div>
<div id="frame6">枠6</div>
<div id="frame7">枠7</div>
<div id="frame8">枠8</div>
<div id="frame9">枠9</div>
<div id="frame10">枠10</div>
</body>
</html>
[スクロールをロック]のリンクをクリックすると、下記のJavaScript関数を実行します。
function LockScroll() {
document.addEventListener("mousewheel", handleMouseWheel, { passive: false });
document.addEventListener("touchmove", handleTouchMove, { passive: false });
document.addEventListener("keydown", handleKeyDown, { passive: false });
document.body.style.overflow = "hidden";
}
下記の行でマウスのホイルによるスクロールをブロックします。addEventListenerメソッドでmousewheelイベントのイベントリスナを追加しています。
イベントリスナでは、prevnetDefault()
メソッドを呼び出し、デフォルトの処理をブロックします。
document.addEventListener("mousewheel", handleMouseWheel, { passive: false });
function handleMouseWheel(e) {
e.preventDefault();
}
続いての下記の行で、タッチによるスクロールをブロックします。addEventListenerメソッドでtouchmoveイベントのイベントリスナを追加しています。
イベントリスナでは、先のマウスホイールの処理と同様にprevnetDefault()
メソッドを呼び出し、デフォルトの処理をブロックします。
document.addEventListener("touchmove", handleTouchMove, { passive: false });
function handleTouchMove(e) {
e.preventDefault();
}
下記の行でキーボードのカーソルキーによるスクロールをブロックします。addEventListenerメソッドでkeydownイベントのイベントリスナを追加しています。
イベントリスナでは、キーコードを判別し、押されたキーがカーソルキーであった場合、prevnetDefault()
メソッドを呼び出し、デフォルトの処理をブロックします。
document.addEventListener("keydown", handleKeyDown, { passive: false });
function handleKeyDown(e) {
switch (e.keyCode) {
case 0x25:
case 0x26:
case 0x27:
case 0x28:
e.preventDefault();
break;
}
}
上記3つの処理を実行しても、ウィンドウのスクロールバーをマウスで操作すると画面をスクロールできてしまいます。
この操作を防ぐためにスクロールバーを非表示にします。
document.body.style.overflow = "hidden";
なお、[スクロールをアンロック]のリンクがクリックされた場合は、下記のJavaScriptを実行します。
addEventListenerで追加したイベントリスナを削除し、スクロールバーの表示を戻すことで、スクロールができるようになります。
function UnLockScroll() {
document.removeEventListener("mousewheel", handleMouseWheel, { passive: false });
document.removeEventListener("touchmove", handleTouchMove, { passive: false });
document.removeEventListener("keydown", handleKeyDown, { passive: false });
document.body.style.overflow = "visible";
}
上記のHTMLファイルを表示します。下図のページが表示されます。
ページ表示直後はマウスホイール、タッチ、カーソルキー、スクロールバーでページをスクロールできます。
上部の[スクロールをロック]のリンクをクリックします。スクロールバーが非表示になり、マウスホイールやタッチ、カーソルキーでのスクロールができない状態になります。
[スクロールをアンロック]のリンクをクリックすると、スクロールバーが表示され、スクロールができる状態に戻ります。
スクロールをブロックさせることができました。