HTML DOMのscrollLeftプロパティとは？水平スクロール位置の取得・設定方法を解説
HTMLドキュメントにおけるDOMのscrollLeftプロパティは、要素内のコンテンツが水平方向にどれだけスクロールされているかを、ピクセル単位で取得・設定できるプロパティです。JavaScriptから動的に横スクロールの位置を制御したい場合に活用できます。
構文
scrollLeftプロパティの基本的な構文は以下のとおりです。
現在のスクロール位置を取得する
element.scrollLeft
スクロール位置を設定する
element.scrollLeft = value
valueには、移動先の位置をピクセル単位の数値で指定します。
サンプルコード
それでは、scrollLeftプロパティを使った具体的な例を見てみましょう。下記のコードでは、スクロール可能なボックスを作成し、スクロールするたびに左方向・上方向のスクロール量をリアルタイムに表示します。
<!DOCTYPE html>
<html>
<head>
<style>
body {
text-align: center;
color: #fff;
background: #ff7f5094;
height: 100%;
}
.show {
font-size: 1.5rem;
}
#myDIV {
height: 200px;
width: 200px;
overflow: auto;
margin: 20px auto;
}
#content {
height: 400px;
width: 1000px;
background-color: lightblue;
}
</style>
</head>
<body>
<h1>DOM scrollLeft/scrollTop プロパティのデモ</h1>
<div id="myDIV" onscroll="display()">
<div id="content"></div>
</div>
<div class="show"></div>
<script>
function display() {
var elmnt = document.getElementById("myDIV");
var x = elmnt.scrollLeft;
var y = elmnt.scrollTop;
document.querySelector(".show").innerHTML = "Left Scroll = " + x + "px / Top Scroll = " + y + "px";
}
</script>
</body>
</html>
実行結果
このコードをブラウザで開くと、次のような画面が表示されます。
続いて、水色のボックス内をスクロールしてみましょう。スクロールに合わせて、左方向（scrollLeft）と上方向（scrollTop）のスクロール量がピクセル単位で表示されます。
scrollLeftプロパティを使う際のポイント
- 要素がスクロール可能でない場合、scrollLeftの値は常に0になります。
- 読み取りと書き込みの両方が可能なため、
element.scrollLeft = 100;のように記述すれば、JavaScriptから任意の位置へ横スクロールさせることができます。 - 縦方向のスクロール位置を扱いたい場合は、同じくピクセル単位で値を扱えるscrollTopプロパティを使用します。
- 書字方向が右から左（RTL）の言語環境では挙動が異なる場合があるため、多言語サイトで利用する際は注意が必要です。
-
【初心者向け】HTML DOMのoffsetParentプロパティの使い方とサンプルコード
offsetParentプロパティとは HTML DOM の offsetParent プロパティは、対象要素のオフセット（相対的な位置）がどの親要素を基準として定義されているかを示し、その基準となる親要素への参照を返します。 具体的には、CSS の position プロパティ（relative / absolute / fixed / sticky）が指定された最も近い祖先要素が基準となります。該当する要素が存在しない場合は <body> 要素が返されます。また、テーブルセル内の要素であれば <td> や <table> などのテーブル関連要素が基準にな
-
HTML DOM titleプロパティとは？使い方とサンプルコードを解説
HTML DOM titleプロパティとはHTML DOMのtitleプロパティは、HTML要素のtitle属性に対応する文字列を取得（戻り値として返す）したり、設定したりするためのプロパティです。title属性に値が設定されている場合、その要素にマウスカーソルを重ねると、ツールチップとしてテキストが表示されます。この動的な挙動をJavaScriptから制御できるのが、titleプロパティの役割です。構文title属性の値を取得する場合：ElementOfHTMLObject.titletitle属性に文字列を設定する場合：ElementOfHTMLObject.title = string使