スクロール

JavaScriptで、ブラウザ画面全体やページの一部をスクロールさせることができます。

本ページでは、スクロール関連の処理について説明します。

画面をスクロールさせる方法

画面全体をスクロールさせるメソッドには、以下があります。

window.scrollTo(x,y)
ページ全体の左上から水平にx、垂直にyの場所に移動します。pxで指定します。
window.scrollBy(x,y)
現在の表示位置から水平にx、垂直にy移動します。pxで指定します。

例えば、window.scrollTo(0,0);を実行すると、ページトップに移動します。scrollByでは負の値を指定すると、今の位置から上や左に移動します。

ページが表示された時にスクロールさせたい場合、以下のように途中に記述すると、最後までドキュメントが読み込まれていない状態のため、下にスクロールできないことがあります。

【スクロールできない例】
<html>
<head>
<title>タイトル</title>
<script>
window.scrollTo(0,100);
</script>
</head>

<body>
・・・
</body>
</html>

上記は、bodyが読み込まれる前にスクロールしようとするため、結果としてスクロールできません。この場合、body要素の最後にスクリプトを配置すると、読み込んだ後にスクロールできます。

また、window.addEventListener("load",function() { window.scrollTo(0,100); });のように記述すると、最初に記述したとしてもページが読み込まれた後に処理することができます。

要素のスクロール、高さ、幅

要素に対するスクロールや高さ、横幅関係のプロパティには以下があります。

scrollTop
要素の上から、下に何px移動しているかを取得できます。また、下に移動させることもできます。
scrollLeft
要素の左から、右に何px移動しているかを取得できます。また、右に移動させることもできます。
scrollHeight
要素の高さが何pxかを取得できます。
scrollWidth
要素の横幅が何pxかを取得できます。

例えば、scrollTopプロパティは以下のように使います。

【scrollTopプロパティの利用例】
<div id="test" style="height:3em;overflow: auto;">
テスト1行目<br>
テスト2行目<br>
テスト3行目<br>
テスト4行目<br>
テスト5行目<br>
</div>

<script>
const x = document.querySelector("#test");
x.scrollTop = 20;
</script>

div要素では高さを指定し、文字が要素からはみ出すとスクロールバーが表示されるようにしています。const xで、divをオブジェクトとして変数xから参照できるようにし、プロパティscrollTopで20px下にスクロールさせています。

上記は、以下のように表示されます。

テスト1行目
テスト2行目
テスト3行目
テスト4行目
テスト5行目

20px下にスクロールして表示されていると思います。let y = x.scrollTopなど、スクロールした値を取得することもできます。

scrollLeftプロパティも使い方は同じです。ただし、テキストは横幅に合わせて自動的に折り返すため、スクロールにならないことがあります。その場合、styleにwhite-space:nowrap;を追加すると、折り返さずスクロールできるようになります。

最後の行を表示する方法

ページが表示された時に最後の行を表示したい場合は、以下のようにします。

【ページが表示された時に最後の行を表示する例】
<div id="test" style="height:3em;overflow: auto;">
テスト1行目<br>
テスト2行目<br>
テスト3行目<br>
テスト4行目<br>
テスト5行目<br>
</div>

<script>
const x = document.querySelector("#test");
x.scrollTop = x.scrollHeight;
</script>

x.scrollHeightで要素の高さを取得し、その値分スクロールさせています。上記は、以下のようになります。

テスト1行目
テスト2行目
テスト3行目
テスト4行目
テスト5行目

最初から、最後の行が表示されていると思います。

画面のスクルール位置

画面のスクロール位置は、以下で取得できます。

縦位置
document.documentElement.scrollTop
横位置
document.documentElement.scrollLeft

scrollTopやscrollLeftは先に説明した通りで、要素の上や左からの位置を示します。以下は、縦方向のスクロール位置を表示する例です。

【縦方向のスクロール位置を表示する例】
<p>スクロール位置は縦<span id="test">0</span>px</p>

<script>
window.addEventListener("scroll", func1);
function func1() {
  const x = document.querySelector("#test");
  x.textContent = document.documentElement.scrollTop;
}
</script>

window.addEventListenerで、画面全体がスクロールした時に関数func1を呼び出しています。上記は、以下のように表示されます。

スクロール位置は縦0px

画面がスクロールする度に、数字が変わると思います。