[Web] DIVのスクロールをJavaScriptから操作する

今日はライトなネタを。

Webページを作成する際に、要素の高さを固定して、内容量によってはスクロールして表示させる事があるかと思います。そのスクロールの上げ下げをJavaScriptで操作する方法を調べたので、ブログに残しておきたいと思います。

Webページ内のスクロールする要素

Webページ内で、以下のような要素を見た事は無いでしょうか。高さが固定されていて、表示内容がたくさんある場合には、スクロールして内容を全て見るやつです。

<div id="area" style="width:300px; height:100px; overflow:auto; border:1px solid #aaaaaa;">
こんにちは。
この文章を最後まで読むには縦スクロールする必要があります。
あああ
いいい
ううう
えええ
おおお
最後までスクロール頂きありがとうございます。
</div>

スクロールをJavaScriptで操作する

上記のようなスクロールをJavaScriptで操作する上で、JavaScriptで取得出来る以下の値を利用します。

// 現在の縦スクロール位置
var scrollPosition = document.getElementById("area").scrollTop;
// スクロール要素の高さ
var scrollHeight = document.getElementById("area").scrollHeight;

そして、scrollTopに値を設定する事で、その位置までスクロールをすることが出来ます。

以下の例では、一番下までスクロールする例です。

document.getElementById("area").scrollTop = scrollHeight;

なお、以下の値を利用することで、横スクロールも可能です。

// 現在の横スクロール位置
var scrollPosition = document.getElementById("area").scrollLeft;
// スクロール要素の横幅
var scrollHeight = document.getElementById("area").scrollWidth;

また、以下の値は、上記DIV要素の元々の高さ/横幅のため、スクロール量に関わらず一定値を返します。そのため、間違ってこの値を使ってスクロールを操作しようとすると、残念な結果になります。

// 要素の高さ（ここでは100を取得出来る）
var elementHeight = document.getElementById("area").clientHeight;
// 要素の横幅（ここでは300を取得出来る）
var elementWidth = document.getElementById("area").clientWidth;

最後に

こーゆう小さな事を多く知っていると実装力も付いてくるのかなぁ。気になったら色々と調べてみよっと。