scrollWidthとは
- ここで説明するscrollWidth とは次の語句からなるjavascriptのプロパティです。
- scroll
- 読み: スクロール
意味: 巻物、ディスプレーに映っている文字列や図形を上下左右に移動させること - width
- 読み: ウィズ
意味: 横幅
scrollWidthプロパティの概要
このプロパティは、要素のコンテンツがあふれて画面に表示しきれない部分を含めた、 パディングボックスとコンテンツボックスの横幅の総和を求めます。
このプロパティは読み取り専用です。
構文
サンプルを見る前に構文を確認しておきます。
var elmScrollWidth = Element.scrollWidth;サンプルコードと実行結果
このサンプルでは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");
elmOutput.innerText = elmDiv.scrollWidth;
</script>
- 04: 結果の出力 (div要素の内部の横幅をoutput要素のコンテンツに表示します。)
サンプル要素:
Welcome.ThankYouforVisitingYwork.
WeLookForwardToWorkingWithYouInTheFuture.
結果: