この記事では、scrollLeftを使って、要素内での横方向（左）スクロール量を取得と、指定のスクロール位置まで移動をしていきます。
scrollLeft
使い方
element.scrollLeftという形式で使います。
横スクロール量を取得する【デモ】
横スクロール量を取得してみます。
左にスクロールして「スクロール量確認」ボタンをクリックすると、左スクロール量が表示されます。
サンプルコード
<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: 100px;
height: 100px;
}
#sample {
width: 500px;
height: 100px;
background-color: yellow;
}function countScroll(){
var target = document.getElementById('target');
var x = target.scrollLeft;
document.getElementById('output').innerHTML = x;
}target.scrollLeftでスクロール量を取得し、innnerHTMLで表示しています。
指定した横スクロール位置へ移動【デモ】
指定の横スクロール位置に移動させてみます。
「移動」ボタンをクリックすると、左スクロール量が「50」ずつプラスされていきます。
サンプルコード
<button onclick="moveScroll();">移動</button>
<div id="target">
<div id="sample">
<p>あいうえお。カキクケコ。さしすせそ。タチツテト<br></p>
</div>
</div>#target {
overflow: scroll;
width: 100px;
height: 100px;
}
#sample {
width: 500px;
height: 100px;
background-color: yellow;
}function moveScroll(){
var target = document.getElementById('target');
target.scrollLeft += 50;
}target.scrollLeft += 50でスクロール量が50ずつプラスされます。
