この記事ではscrollTopを使って、要素内でのスクロール量を取得します。
scrollTop
使い方
element.scrollTopという形式で使います。
スクロール量を取得【デモ】
まずはスクロール量を取得します。
黄色の枠内で垂直方向にスクロールし、「スクロール量確認」ボタンをクリックすると、スクロール量が表示されます。
サンプルコード
<div id="target">
<div id="sample">
<p>サンプルテキストサンプルテキストサンプルテキスト<br></p>
</div>
</div>
<button onclick="countScroll();">スクロール量確認</button>
<div>スクロール量：<span id="output"></span></div>#target {
overflow: scroll;
width: 200px;
height: 70px;
}
#sample {
width: 200px;
height: 500px;
background-color: yellow;
}function countScroll(){
var target = document.getElementById('target');
var y = target.scrollTop;
document.getElementById('output').innerHTML = y;
}指定したスクロール量へ移動【デモ】
scrollTopを使って、指定したスクロール量の場所へ移動します。
element.scrollTop = 数値という形式で使います。
「移動」ボタンをクリックするとスクロール量「50」の箇所へ移動します。
サンプルコード
<button onclick="moveScroll();">移動</button>
<div id="target">
<div id="sample">
<p>サンプルテキストサンプルテキストサンプルテキスト<br></p>
</div>
</div>#target {
overflow: scroll;
width: 200px;
height: 70px;
}
#sample {
width: 200px;
height: 500px;
background-color: yellow;
}function moveScroll(){
var target = document.getElementById('target');
target.scrollTop = 50;
}