スクロールロックした際にページ上部にスクロールしないようにする場合はこちらの記事を参照してください。
position:fixed
に設定し、top
bottom
left
right
の値を0にすることでWebブラウザのビューポートのサイズをコンテンツのサイズに設定することでスクロールできない状態にします。<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
function ScrollLock() {
elems = document.getElementsByTagName("body");
for (var item of elems) {
item.classList.add("scroll-lock");
}
}
function ScrollUnlock() {
elems = document.getElementsByTagName("body");
for (var item of elems) {
item.classList.remove("scroll-lock");
}
}
</script>
<style>
body.scroll-lock {
position: fixed;
left: 0px;
right: 0px;
top: 0px;
bottom:0px;
}
#frame1 {
height: 120px;
border: 1px solid #000000;
}
#frame2 {
height: 120px;
border: 1px solid #ff00dc;
}
#frame3 {
height: 120px;
border: 1px solid #b200ff;
}
#frame4 {
height: 120px;
border: 1px solid #4800ff;
}
#frame5 {
height: 120px;
border: 1px solid #0094ff;
}
#frame6 {
height: 120px;
border: 1px solid #00ffff;
}
#frame7 {
height: 120px;
border: 1px solid #4cff00;
}
#frame8 {
height: 120px;
border: 1px solid #ffd800;
}
#frame9 {
height: 120px;
border: 1px solid #ff6a00;
}
#frame10 {
height: 120px;
border: 1px solid #ff0000;
}
</style>
</head>
<body>
<p><a href="javascript:ScrollLock();">スクロールのロック</a></p>
<p><a href="javascript:ScrollUnlock();">スクロールのアンロック</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>
fixed
を指定し、top,bottom,left,rightプロパティの値に0を設定します。この設定によりビューポートの範囲がコンテンツの大きさとなり、スクロールバーが非表示になりスクロールもできない状態になります。 body.scroll-lock {
position: fixed;
left: 0px;
right: 0px;
top: 0px;
bottom:0px;
}
ScrollLock()
関数を呼び出し、bodyタグの要素にscroll-lock クラスを追加します。ScrollUnlock()
関数を呼び出した場合には、bodyタグの要素のクラスからscroll-lock クラスを削除します。 <p><a href="javascript:ScrollLock();">スクロールのロック</a></p>
<p><a href="javascript:ScrollUnlock();">スクロールのアンロック</a></p>
ScrollLock()
関数では、Bodyタグの要素へのクラスの適用はgetElementsByTagName()
メソッドを呼び出しbodyタグの要素を取得します。
getElementsByTagName()
メソッドの戻り値は要素のリストで取得されるため、
for ループを利用して取得された複数の要素のclassList オブジェクトに"scroll-lock" クラスを追加します。ScrollUnlock()
関数も同様の処理をします。クラスの削除はclassList.remove()
メソッドを利用します。 function ScrollLock() {
elems = document.getElementsByTagName("body");
for (var item of elems) {
item.classList.add("scroll-lock");
}
}
function ScrollUnlock() {
elems = document.getElementsByTagName("body");
for (var item of elems) {
item.classList.remove("scroll-lock");
}
}