Element.scrollHeight - スクロール分を含めた高さを取得する

投稿日:2016/03/03 / 更新日:2016/03/03

JavaScriptの、ElementオブジェクトのscrollHeightはスクロール分を含めた全体の高さを取得するプロパティです。

説明

scrollHeightプロパティはスクロール分を含めた全体の高さです。スクロールバーがあるかないかで計算方法が変わります。

border

padding

content

スクロールバーが表示されていない場合、heightとpaddingとborderの合計で、marginを含まない値となります。例えば上記のような要素があったとします。scrollHeightプロパティを参照すると、border(青色)、padding(白色)、height(茶色)の合計値が取得できます。これに関しては、offsetHeightと同じです。

内部コンテンツ

さて、scrollHeightの特徴はここからです。要素がスクロール可能な状態になっている時、考え方が全く変わってきます。例えば上記のように青い枠線を持った要素のscrollHeightを考えてみましょう。この青い要素は自身よりも大きいサイズの画像を内包していて、スクロール表示させています。

この時、scrollHeightの起点はborderの左上ではなく、paddingの左上となります。そして、スクロールできる分の高さがscrollHeightの数値となるのです。

border

padding

content

もう1つ例を見ておきます。内包するコンテンツが小さく、スクロールをする必要がなくても、スクロールバーが表示されている状態の場合、scrollHeightの起点はpaddingの左上となり、そして、スクロールバーを含めない、paddingとheightの合計がscrollHeightの値となります。

さて、ChromeやSafariと、Firefoxで取得できるscrollHeightの値が違うことがあります。これの原因は、paddingとスクロールバーの関係です。

まずはFirefoxの例を見て下さい。下部にスクロールバーがある時、padding-bottomの幅が削られてしまいます。

一方、Chromeの例を見て下さい。下部にスクロールバーがある時、padding-bottomの幅は削られません。Safariも同様です。この削られるか、削られないかの分の幅が、scrollHeightで取得できる値のズレとなって表れます。ブラウザ間で異なる値になる可能性が高いscrollHeightは、プログラムに組み込みにくいということが言えますね。

サンプルコード

<p id="target">SYNCER</p>

// 要素を取得
var pElement = document.getElementById( "target" ) ;

// scrollHeightを取得
var scrollHeight = pElement.scrollHeight ;

デモ

Element.scrollHeightを取得して表示します。

RUN
HTML
CSS
JavaScript

<p><pre><code>.box { height: 100px ; padding: 10px ; } .img { height: 150px ; vertical-align: bottom ; } </code></pre></p> <div id="target" class="box"><img src="/bridge.jpg" width="240" height="180"></div> <p id="output" class="output"></p> <p id="error" class="error none"></p> <p><button id="fire" class="button">実行</button></p> <p><button id="reset" class="button">リセット</button></p>

.output { color: #333 ; text-align: center ; padding: 8px 0 ; border: 1px solid #333 ; min-height: 24px ; } .box { width: 150px ; height: 100px ; padding: 10px ; border: 5px solid #000 ; margin: 0 ; overflow: scroll ; } img { width: 200px ; height: 150px ; vertical-align: bottom ; } .error { color: #f00 ; padding: 8px 12px ; border: 1px solid #333 ; min-height: 24px ; } .button { color: #333 ; display: block ; background: #f2f2f2 ; text-align: center ; padding: 8px ; font-size: 1rem ; font-weight: 700 ; border: 1px solid #e6e6e6 ; width: 100% ; box-sizing: border-box ; } .button:hover { cursor: pointer ; background: #e6e6e6 ; } .none { display: none ; } html{ font:400 14px / 1.618 ArialMT,"Hiragino Kaku Gothic ProN","ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic Pro W3","ヒラギノ角ゴ Pro W3","メイリオ","ＭＳＰゴシック","Osaka" ; }

// 実行 document.getElementById( "fire" ).addEventListener( "click", function() { try { // 要素を取得 var pElement = document.getElementById( "target" ) ; // scrollHeightを取得 var scrollHeight = pElement.scrollHeight ; // 取得した結果を出力 document.getElementById( "output" ).textContent = scrollHeight ; // コンソールで内容を出力 console.log( scrollHeight ) ; // エラーを非表示 errorElement.className = "error none" ; // エラー表示 } catch ( msg ) { errorElement.className = "error" ; errorElement.textContent = msg ; console.error( msg ) ; } } ) ; // リセット document.getElementById( "reset" ).addEventListener( "click", function() { initialize() ; } ) ; // エラー表示用の要素 var errorElement = document.getElementById( "error" ) ; // 初期化 function initialize() { errorElement.className = "error none" ; document.getElementById( "output" ).textContent = "" ; }

構文

readonly long scrollHeight = Element.scrollHeight

返り値

項目	説明
scrollHeight	スクロールできる分を含めた全体の高さ。スクロールバーがある時とない時で計算方法が異なる。インライン要素の場合は`0`。

説明

サンプルコード

デモ

構文

返り値

関連項目