overflow: auto;でスクロールバーを表示したときに、スクロール位置を取得する

要素にoverflow: auto;を指定してスクロールバーを表示したときに、スクロールの位置を取得する方法で少し迷ったので、実装方法をメモしておきます。

サンプルコード

通常スクロールの位置を取得するときは$(window).scrollTop()と指定しますが、要素内のスクロール位置を取得するときも同様に、$(要素名).scrollTop()のようにします。

HTML

<div class="scroll-area">
	<div class="scroll-inner">
		<p>テスト</p>
	</div>
</div>
スクロール位置<span id="scrollPos">0</span>
<button id="scrollMove">500pxの位置へ移動</button>

CSS

.scroll-area {
	width: 600px;
	height: 300px;
	overflow: auto;
}
.scroll-inner {
	height: 1000px;
}

JavaScript

$(function() {
	// スクロール位置の取得
	$('.scroll-area').on('scroll', function() {
		var scrollPos = $('.scroll-area').scrollTop();
		$('#scrollPos').text(scrollPos);
	});

	// 指定位置へ移動
	$('#scrollMove').on('click', function() {
		$('.scroll-area').animate({
			scrollTop: 500
		});
	});
});

スクロール位置などを取得するデモページ