ywork2020.com

Title

要素のコンテンツの水平スクロール値を取得、設定する

目次 (INDEX)

scrollLeftとは

ここで説明するscrollLeft とは次の語句からなるjavascriptのプロパティです。
scroll
読み: スクロール
意味: 巻物、ディスプレーに映っている文字列や図形を上下左右に移動させること
left
読み: レフト
意味: 左、左側

目次に戻る

scrollLeftプロパティの概要

このプロパティは、要素の内容が水平にスクロールした値をピクセル値で取得、設定します。

取得、設定する値は整数値であり、単位は付きませんがピクセル単位だということに注意してください。

目次に戻る

構文

サンプルを見る前に構文を確認しておきます。

var intScrollLeft = Element.scrollLeft;
Element.scrollLeft = intScrollLeft;

目次に戻る

サンプルコードと実行結果

このサンプルではdiv要素のコンテンツに収まらないテキストをスクロールバーを使って表示できるようにしています。 この要素のスクロールバーをユーザーが操作したときに横軸のスクロール位置を取得し、結果欄に表示します。

ここでは値の取得しか行っていませんが、プロパティに値を代入することでスクロール位置を変更することも可能です。

取得する値について補足をしておきますと、ヘブライ語やアラビア語のようにテキストの記述方向が右から左になる場合には、 スクロールの始点は右になるのでスクロールするごとに負の数が増加することになります。

サンプルコード: CSS
<style>
	#idDiv{
		border: medium solid currentColor;
		background-color: ##ivory;
		padding: 1em;
		width: 100px;
		height: 100px;
		overflow: scroll;
		overflow-y: visible;
	}
</style>
  • 08: overflow (コンテンツが溢れる場合には、スクロールバーを表示します。)
サンプルコード: HTML
<body>
	<div id="idDiv">
		Welcome.ThankYouforVisitingYwork.
		WeLookForwardToWorkingWithYouInTheFuture.
	</div>
	結果:<br>
	<output id="idOutput">innerText</output>
</body>
  • 02-05: div (この要素の横スクロールの位置を取得します。)
  • 07: output (この要素に横スクロール位置の結果を表示します。)
サンプルコード: script
<script>
	let elmDiv = document.getElementById("idDiv");
	let elmOutput = document.getElementById("idOutput");
	elmDiv.addEventListener("scroll", function(){
		elmOutput.innerText = elmDiv.scrollLeft;
	});
</script>
  • 04: スクロールイベント (div要素でスクロールが行われたら関数を実行します。)
  • 05: 関数の処理 (div要素のスクロール位置をoutput要素のコンテンツに表示します。)
実行結果:
サンプル要素:
Welcome.ThankYouforVisitingYwork. WeLookForwardToWorkingWithYouInTheFuture.
結果:
innerText

目次に戻る