「JavaScript」scrollLeft プロパティで要素の内容が左端からスクロールするピクセル数を取得する
環境
Google Chrome 103.0.5060.114
構文
1.スクロールしたピクセル数を取得します
var sLeft = element.scrollLeft;
sLeft は element が左端からスクロールしたピクセル数を整数で表現したものです。
2.スクロールしたピクセル数を設定します
element.scrollLeft = 10;
使用例
<!DOCTYPE html>
<html>
<style>
#cft {
width: 200px;
height: 150px;
border: 1px solid #ccc;
overflow-x: scroll;
}
#content {
width: 450px;
background-color: skyblue;
}
</style>
<body>
<div id="cft">
<div id="content">ボタンをクリックすると右へスライドします。</div>
</div>
<p><button id="check" type="button">検証</button></p>
<script>
const button = document.getElementById('check');
button.onclick = function () {
document.getElementById('cft').scrollLeft += 20;
};
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<style>
#cft {
width: 200px;
height: 150px;
border: 1px solid #ccc;
overflow-x: scroll;
}
#content {
width: 450px;
background-color: skyblue;
}
</style>
<body>
<div id="cft">
<div id="content">ボタンをクリックすると右へスライドします。</div>
</div>
<p><button id="check" type="button">検証</button></p>
<script>
const button = document.getElementById('check');
button.onclick = function () {
document.getElementById('cft').scrollLeft += 20;
};
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<style>
#cft {
width: 200px;
height: 150px;
border: 1px solid #ccc;
overflow-x: scroll;
}
#content {
width: 450px;
background-color: skyblue;
}
</style>
<body>
<div id="cft">
<div id="content">ボタンをクリックすると右へスライドします。</div>
</div>
<p><button id="check" type="button">検証</button></p>
<script>
const button = document.getElementById('check');
button.onclick = function () {
document.getElementById('cft').scrollLeft += 20;
};
</script>
</body>
</html>
結果
「検証」ボタンをクリックすると右へスライドします。