web-dev-qa-db-ja.com

jQueryでdivの完全なコンテンツの高さを取得するにはどうすればよいですか？

独自のスクロールバーを作成しようとしています。ほとんどのjquery scrollbarプラグインを試してみましたが、どれも機能しないようでした。そのため、独自のプラグインを作成することにしました。スクロール可能なコンテンツを含むオーバーフロー領域があります。スクロール可能なコンテンツ領域の高さを把握できれば、スクロールバーを機能させることができます。 .scrollHeight（）を試してみましたが、ブラウザーもそれを認識しません。オーバーフロー領域の位置は固定されています。

jqueryscrollheight
61
mtlca401

scrollHeightはプロパティです の DOMオブジェクト 、関数ではありません：

要素のスクロールビューの高さ。要素のパディングは含まれますが、マージンは含まれません。

これを考えると：

<div id="x" style="height: 100px; overflow: hidden;">
    <div style="height: 200px;">
        pancakes
    </div>
</div>

これにより200が得られます。

$('#x')[0].scrollHeight

例： http://jsfiddle.net/ambiguous/u69kQ/2/ （JavaScriptコンソールを開いた状態で実行）。

128
mu is too short

可能であれば、。scrollHeightを使用しないでください。

.scrollHeightは、特定の状況（スクロール中に最も顕著）で異なるブラウザーで同じ種類の結果を生成しません。

例えば：

<div id='outer' style='width:100px; height:350px; overflow-y:hidden;'>
<div style='width:100px; height:150px;'></div>
<div style='width:100px; height:150px;'></div>
<div style='width:100px; height:150px;'></div>
<div style='width:100px; height:150px;'></div>
<div style='width:100px; height:150px;'></div>
<div style='width:100px; height:150px;'></div>
</div>

もしあなたがそうするなら

console.log（$（ '＃outer'）。scrollHeight）;

chrome、FireFox、Operaでは900ピクセルになります。それは素晴らしいことです。

ただし、ホイールイベント/ホイールイベントを#outerにアタッチすると、スクロールするとChromeは900px（正しい）の定数値を与えますが、FireFoxとOperaは、下にスクロールするとその値を変更します（間違っています）。

これを行うための非常に簡単な方法は、そのようなものです（実際には少しのチートです）。 （この例は、＃outerにコンテンツを動的に追加する際にも機能します）：

$('#outer').css("height", "auto");
var outerContentsHeight = $('#outer').height();
$('#outer').css("height", "350px");

console.log(outerContentsHeight); //Should get 900px in these 3 browsers

これら3つのブラウザーを選択する理由は、特定の状況で3つすべてが.scrollHeightの値に同意できないためです。私は自分でスクロールペインを作成してこの問題に遭遇しました。これが誰かを助けることを願っています。

33
Shazboticus S Shazbot

使用することもできます-

$('#x').prop('scrollHeight') <!-- Height -->
$('#x').prop('scrollWidth')  <!-- Width -->
31
Anmol Saraf

Element.scrollHeightは、 ここ で示されているように、関数ではなくプロパティです。 here のように、scrollHeightプロパティはIE8以降でのみサポートされます。それより前に動作する必要がある場合は、CSS overflowとheightを一時的にautoに設定します。これにより、divが必要な最大の高さになります。次に、高さを取得し、プロパティを以前の状態に戻します。

5
Sajid

.outerHeight()で取得できます。

時々、0を返します。最良の結果を得るには、divのreadyイベントで呼び出すことができます。

安全のため、divの高さをxに設定しないでください。高さautoを維持して、コンテンツに適切な高さを適切に入力できます。

$('#x').ready( function(){
// alerts the height in pixels
alert($('#x').outerHeight());
})

詳細な投稿を見つけることができます こちら 。

1
open and free
  1. scrollHeightを使用するとバグが発生するだけでなく、コンテナの高さがハードコードされている場合は機能しません（おそらくほとんどの場合、container.height()を実行せずにコンテンツの高さを取得するため）
  2. @ shazboticus-s-shazbotソリューションは、コンテナの高さを一時的に変更したり、高さをハードコーディングしたりできる場合に適しています。
  3. 代替ソリューションは次のとおりです。
$('#outer')
    // Get children in array format, as we'll be reducing them into a single number
    .contents().toArray()
    // Filter out text and comment nodes, only allowing tags
    .filter(el => el.nodeType === 1)
    // Sum up all the children individual heights
    .reduce((accumulator, el) => $(el).outerHeight(true) + accumulator, 0);

もちろん、この後者の選択肢は、#outerにスペースを占有する即時テキストの子がなく、測定する場合にのみ機能します。それらは私の2セントです。

  1. ラップされていないテキストを測定する場合は、DOMツリーを変更し、$('#outer').children().height()を実行することで簡単に測定できる内部<div>を用意することをお勧めします
1
Tom Roggero