スクロールの位置（量）を取得・設定

要素のスクロールの位置（量）を取得・設定するには、element.scrollTopプロパティとelement.scrollLeftプロパティを使用します。
ウィンドウのスクロールの位置（量）を取得・設定する場合、 Webkit系（Safari, Chrome, iOS）・IE5はdocument.bodyオブジェクト（body要素）、IE（6以上）・Firefox・Operaはdocument.documentElementオブジェクト（html要素）でそれぞれ取得・設定します。

※ IE8以下では、ブラウザ自身（ウィンドウ）のスクロール以外の要素は対応していません。

構文

取得

// 上からの位置
var getTopPosition  = element.scrollTop;

// 左からの位置
var getLeftPosition = element.scrollLeft;

設定

// 上からの位置
element.scrollTop  = setTopPosition;

// 左からの位置
element.scrollLeft = setLeftPosition;

戻り値

scrollTopプロパティは上からのスクロールの位置、scrollLeftプロパティは左からのスクロールの位置を返します。

サンプルコード

取得

JavaScript

var sampleElement   = document.getElementById('sample'),
    outputElement   = document.getElementById('output'),
    documentElement = null,
    positionTop     = 0,
    positionLeft    = 0;

if (navigator.userAgent.toLowerCase().match(/webkit|msie 5/)) {
	// Webkit系（Safari, Chrome, iOS）、IE5はbody要素
	documentElement = document.body;
} else {
	// IE（6以上）、Firefox、Operaはhtml要素
	documentElement = document.documentElement;
}

// 指定要素のスクロール量取得
sampleElement.onscroll = function() {
	positionTop  = this.scrollTop;
	positionLeft = this.scrollLeft;

	outputElement.innerHTML = 'div : [ top ] =' + positionTop + ', [ left ] =' + positionLeft + '
' + outputElement.innerHTML;
};

// ウィンドウのスクロール量取得
window.onscroll = function() {
	positionTop  = documentElement.scrollTop;
	positionLeft = documentElement.scrollLeft;

	outputElement.innerHTML = documentElement.tagName + ' : [ top ] =' + positionTop + ', [ left ] =' + positionLeft + '
' + outputElement.innerHTML;
};

設定

JavaScript

var sampleElement   = document.getElementById('sample'),
    documentElement = null;

if (navigator.userAgent.toLowerCase().match(/webkit/)) {
	// Webkit系（Safari, Chrome, iOS）はbody要素
	documentElement = document.body;
} else {
	// IE, Firefox, Opera
	documentElement = document.documentElement;
}

// 指定要素のスクロール量を設定
sampleElement.scrollTop = 100;

// ウィンドウのスクロール量を設定
window.scrollTop = 200;

JavaScript逆引きリファレンス一覧へ戻る