【jQuery】overflow:scrollを適用したスクロールできる要素の高さを取得する方法

overflow: scrollを適用した要素の高さと、親要素の高さをjQueryで取得する。

jQuery関連記事

• 

  【jQuery】pdfが存在するか、mimeタイプのバリデーションする

• 

  jQuery UIのsortableを使ってリストをドラッグで並び替える

• 

  jQueryのモーダルウィンドウを使ってフォームの確認画面を実装する

• 

  HTMLのcanvasタグとJavaScriptで円グラフの画像をつくる

• 

  bxSliderをカルーセルやコンテンツスライダーなど便利なサンプル5種

• 

  bxSliderの使い方と、オプションでのカスタマイズ方法

• 

  select・optionタグをjQueryで、プルダウンの選択値を取得、変更する

• 

  jQueryでinput[type="file"]で画像アップロード時にプレビューを表示する

• 

  jQueryでrequiredの専用エラー文と文字数制限のバリデーションをつくる

height()で要素の高さを取得

JavaScript

var h = $('div').height();

height()で、要素の高さを取得できます。

$(セレクタ).scrollHeightでは取得できない

$('div').scrollHeightでは、スクロール部分の高さを取得できないので、下のように変更する必要がある。

scrollHeightでスクロール部分全体の高さを取得

JavaScript

var h = $('div').get(0).scrollHeight;

$('div').get(0).scrollHeightで、スクロール部分の高さを取得できます。

高さを取得するサンプル

See the Pen
by むぅ (@mugenweb)
on CodePen.0

outerHeight()でmarginやpaddingを含めた高さを取得する

上記の他にも、marginやpaddingを含めた高さを取得するouterHeight()もあり、下記記事を参考にしてください。

height()で取得できない！marginやpaddingを含めた高さを取得する【jQuery】

jQueryのheight()だと実はmarginやpaddingやborderを含めた高さが取得できないってことに気づいた話jQuery関連記事height()で取得する値cssこの要素の場合、height()で取得する値は「50」になる...

mugenweb-note.com

2017.06.07