ywork2020.com

Title

要素の中身の高さを取得する

目次 (INDEX)

scrollHeightとは

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

目次に戻る

scrollHeightプロパティの概要

このプロパティは、要素のコンテンツがあふれて画面に表示しきれない部分を含めた、 パディングボックスとコンテンツボックスの高さの総和を求めます。

このプロパティは読み取り専用です。

目次に戻る

構文

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

var elmScrollHeight = Element.scrollHeight;

目次に戻る

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

このサンプルではdiv要素のコンテンツに収まらないテキストをスクロールバーを使って表示できるようにしています。 このスクロールバーを使わないと見ることができない領域を含めた内部の高さを取得します。

サンプルコード: CSS
<style>
	#idDiv{
		border: medium solid currentColor;
		background-color: ##ivory;
		padding: 1em;
		width: 100px;
		height: 100px;
		overflow: scroll;
		overflow-x: visible;
	}
</style>
  • 08: overflow (コンテンツが溢れる場合には、スクロールバーを表示します。)
サンプルコード: HTML
<body>
	<div id="idDiv">
		Welcome.
		Thank you for visiting ywork.
		We look forward to working with you in the future.
	</div>
	結果:<br>
	<output id="idOutput">innerText</output>
</body>
  • 02-06: div (この要素の内部の高さを取得します。)
  • 08: output (この要素に内部の高さの取得結果を表示します。)
サンプルコード: script
<script>
	let elmDiv = document.getElementById("idDiv");
	let elmOutput = document.getElementById("idOutput");
	elmOutput.innerText = elmDiv.scrollHeight;
</script>
  • 04: 結果の出力 (div要素の内部の高さをoutput要素のコンテンツに表示します。)
実行結果:
サンプル要素:
Welcome. Thank you for visiting ywork. We look forward to working with you in the future.
結果:
innerText

目次に戻る

参考: 要素が完全にスクロールされたことを判定する

ここでは参考としてユーザーがスクロールを終点まで移動したことを判別するサンプルを掲載しておきます。 サンプルはスクロールが終点まで移動するとボタンの無効化が解除される仕様です。

サンプルコード: CSS
<style>
	#idReference{
		border: medium solid currentColor;
		background-color: ##lightpink;
		padding: 10px;
		width: 100px;
		height: 100px;
		overflow: scroll;
		overflow-x: visible;
	}
	#idButton{
		width: 120px;
		margin: 5px 0 0 0;
	}
</style>
サンプルコード: HTML
<body>
	<div id="idReference">
		Welcome.
		Thank you for visiting ywork.
		We look forward to working with you in the future.
	</div>
	<button id="idButton" disabled>OK</button>
</body>
サンプルコード: script
<script>
	let elmRef = document.getElementById("idReference");
	let elmBtn = document.getElementById("idButton");
	elmRef.addEventListener("scroll", function(){
		if(elmRef.scrollHeight - elmRef.scrollTop === elmRef.clientHeight){
			elmBtn.disabled = false;
		}
		else{
			elmBtn.disabled = true;
		}
	});
	elmBtn.addEventListener("click", function(){
		window.alert("Thank you");
	});
</script>
  • 05: ポイント (このif文の条件式がスクロールの終点でtrueを返します。)
実行結果:
Welcome. Thank you for visiting ywork. We look forward to working with you in the future.

目次に戻る