2013-07-17 21 views
7

プレーンなJavascriptまたはjQueryのいずれかを使用して、スクロール要素の高さ全体を取得する必要があります。しかしDOMプロパティーscrollHeightis apparently not 100% reliable`scrollHeight`プロパティを使用せずに確実に要素のscrollHeightを返します。

私は一時的に問題を抱えているそれ自体(、項目に autoのCSSの高さを与え、そのサイズをチェックアウトし、その前の値にCSSを返す想定した

- どのように私はjQueryの.css('height')のようなCSS height:100%の代わりheight:1012pxを得るのですか戻ります)。

$el.css('height', 'auto'); 
scrollHeight = $el.height(); 
$el.css('height', ''); 

:しかし、私は道にjQueryの要素に直接CSSスタイルを適用するため、単にので、理論的には、私はこれを行うことができ、スタイルには通常のスタイルシート宣言された値に''戻り、それを適用することを考え出しましたしかし、これは動作していません。 height:autoは、要素の元のスタイル100%をオーバーライドしておらず、エレメントを完全な希望の高さにすることができません。

だから私はこれらの行に沿ってさらに何かを考えています:最初の子要素の上端の位置と最後の子要素の下端の位置を使用して高さを取得します。 (必要であれば、私は、これは概念の単なる証拠である、パディングとマージンを調整することができます。)

function scrollHeight($el) { 
    var lastEl = $el.children(':last'); 
    return (
     lastEl.position().top 
     + lastEl.height() 
     - $el.children(':first').position().top; 
    ); 
} 

Math.max($el[0].scrollHeight, $el.height())の中にいくつかの作業にも役に立つかもしれません...

はひどいアイデアということですか?私は、DOM要素の scrollHeightを知り、それが信頼できるものであること、アイテムがスクロールされても変更されないこと、そしてすべての主要なブラウザやIE 8で作業する必要がある唯一の人になることはできません(ただし、興味深いことにIE 6の解決策を知るために& 7)。

+1

IE 6と7? Google(はい、白い開始ページでも))は、2人の同僚に支持を落としました –

+0

問題を再現するjsfiddleを提供できますか? –

+0

@ RokoC.Buljanそれはかなり良い点です。私の会社は去年のうちにIE7を去っただけなので、野生では乏しくなっても、それをどうサポートするか知りたいと思っていたのです。しかし、私はこれを反映するために質問を更新します。 – ErikE

答えて

6

代わりの

$el.css('height', 'auto');

TRY -

高さ - 私はあなたが言うbecuaseこれをしようとして言及

$el.attr('style', 'height: auto !important');

:自動私の要素のオリジナルを上書きされていませんスタイルは100%、要素がその完全な所望の高さを占めるようにする。

+1

これは実際に問題がどこにあるかを示しています。祖先の要素は完全に高さを取らない「高さ」と「オーバーフロー」値で絶対配置されているため、更新された提案でさえ機能しません。その情報を残して申し訳ありません。 jsfiddleは良いアイデアでした。 – ErikE

+1

'.css( 'height'、 'auto')'を使うとうまくいくでしょう。あなたの提案は素晴らしいですが、正しい方向に私を指摘しました。いくつかの既存のスタイルは、「オート」が何かをするのを妨げていました。そのスタイルは 'bottom:0; top:0'も必要ではなかった。私はあなたの時間を無駄にして申し訳ありませんが、それは本当に無駄ではありませんでした - あなたは今まで35人の担当者を得て、私の問題を助けてくれました。ありがとうございました! – ErikE

+0

@ErikEありがとう、私は助けることができてうれしい:〜) – Ross

関連する問題