knowledge base

マークアップ/フロントエンドエンジニアのWEB制作における備忘録です。平日はWEB屋、休日は社会人劇団の主宰・劇作家をしています。

水平方向のスクロール量を取得する

jQueryを用いた場合

垂直方向はscrollTopで取得できますが、水平方向のスクロール量はscrollLeftによって取得します。

var scrollLeft = $(ELEMENT).scrollLeft();

引数に数値を与えれば、その数値だけ水平方向にスクロールします。

たとえば左に200pxスクロールさせたい場合は次のように指定します。

$(ELEMENT).scrollLeft(200);

ページ全体のスクロール量も、overflow:scrollを指定された要素のスクロール量も取得できます。

ちなみにページ全体のスクロール量を取得するにはdocumentに対してメソッドを実行します。

$(document).scrollLeft();

バニラJavaScript用いた場合

jQueryのようなメソッドはないのですが、DOMオブジェクトのプロパティを参照することでスクロール量の取得/設定が可能になります。

var ELEMENT = document.getElementById('element');
var scrollLeft = ELEMENT.scrollLeft;

ページ全体に対してスクロール量を取得/設定する際にブラウザごとに実装が違ったため(documentのscrollLeftを参照できる場合とそうでない場合がある)、jQueryを用いることをおすすめします。