Reliably return Element scrollHeight ohne ScrollHeight Eigenschaft

Question

Verwenden Sie entweder Javascript oder jQuery, ich brauche die volle Höhe eines Scroll-Elements. Aber die DOM-Eigenschaft scrollHeightis apparently not 100% reliable.

Ich war vorübergehend das Vorstellungsvermögen Element eine CSS-Höhe von auto geben, seine Größe heraus überprüfen, dann die CSS auf den vorherigen Wert zurückgibt (die selbst Probleme hat - wie bekomme ich die CSS height:100% statt height:1012px wie jQuery .css('height') wird zurückkehren). Aber dann habe ich herausgefunden, dass durch die Art und Weise jQuery CSS-Styling direkt auf ein Element bezieht, einfach mit Anwendung dem Stil '' kehrt es zu seinem normalen Style-Sheet-deklarierten Wert, so theoretisch könnte ich dies tun:

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

Aber das funktioniert nicht. height:auto überschreibt nicht den ursprünglichen Stil meines Elements 100% und macht das Element seine volle gewünschte Höhe einnehmen.

So denke ich jetzt etwas mehr in diesen Zeilen: Verwenden Sie die Position des oberen Elements des ersten untergeordneten Elements und die Position des unteren Elements des letzten untergeordneten Elements, um die Höhe zu erhalten. (Ich kann für Polsterung und Marge bei Bedarf anpassen, das ist nur ein Proof of Concept ist.)

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

Einige Arbeiten in der Math.max($el[0].scrollHeight, $el.height()) auch nützlich sein könnte ...

Ist das eine schreckliche Idee? Ich kann nicht die einzige Person sein, die jemals die scrollHeight eines DOM-Elements kennen muss und es zuverlässig sein muss, sich nicht ändern, während das Element gescrollt wird und in allen gängigen Browsern sowie IE 8 funktioniert (obwohl es sein würde interessant zu wissen, eine Lösung für IE 6 & 7).

Answer 1

Statt

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

Try -

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

ich dies weil Sie erwähnen versuchen sagen -

height: auto ist mein Element der Vorlage nicht überschrieben Stil von 100% und lässt das Element seine volle Höhe einnehmen.