YoheiM技術やらずに終われまテン

2011-07-21 [JavaScript] DIVのスクロールをJavaScriptから操作する

こんにちは、@yoheiMuneです。

今日はライトなネタを。

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

f:id:yoheiM:20110721133933j:image




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;



最後に

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

運営しているサイトです。どうぞよろしくお願いします(*´∇`*)

Facebook

HTML5LearnersHTML5を学び合うFacebookPage

HTML5サンプルページ:作成したサンプルを載せているサイト

YoheiM.NET:技術情報を中心に情報発信サイト

cooking_bot:料理情報をつぶやくTwitterアカウント