jquery: comment obtenir la hauteur du contenu intégral d'une div?

Question

J'essaie de créer mes propres barres de défilement. J'ai essayé la plupart des plugins jquery scrollbar et aucun d'entre eux ne semble fonctionner pour moi, alors j'ai décidé de créer le mien. J'ai une zone de débordement avec un contenu défilable. Je peux faire fonctionner la barre de défilement si je suis en mesure de déterminer la hauteur de la zone de contenu défilable. J'ai essayé .scrollHeight () et le navigateur ne le reconnaît même pas. La zone de débordement a une position fixe.

Answer 1

scrollHeight est une propriété d'un objet DOM, pas une fonction:

Hauteur de défilement de la vue d'un élément; il comprend l'élément de rembourrage, mais pas de sa marge.

Compte tenu de ceci:

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

Cela donne 200:

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

Par exemple: http://jsfiddle.net/ambiguous/u69kQ/2/ (courir avec la console JavaScript open).

Answer 2

Si vous pouvez éventuellement l'aider, NE PAS UTILISER .scrollHeight.

.scrollHeight ne pas donner le même type de résultats dans les différents navigateurs, dans certaines circonstances (notamment lors du défilement).

Par exemple:

<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>

Si vous ne

console.log($('#extérieur").scrollHeight);

vous obtiendrez 900px dans Chrome, FireFox et Opera. C'est très bien.

Mais, si vous joignez un wheelevent / roue de l'événement #externe, lorsque vous faites défiler, Chrome va vous donner une valeur constante de 900px (correct), mais FireFox et Opera va changer leurs valeurs comme vous le faites défiler vers le bas (incorrect).

Un moyen très simple de le faire est comme une (un peu de triche, vraiment). (Dans cet exemple, les travaux, tandis que l'ajout dynamique de contenu à #extérieur en tant que bien):

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

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

La raison que j'ai choisi ces trois navigateurs est parce que tous les trois peuvent être en désaccord sur la valeur de .scrollHeight dans certaines circonstances. Je suis tombé sur cette question de faire mon propre scrollpanes. Espérons que cela aide quelqu'un.

Answer 3

Nous pouvons aussi utiliser -

 $('#x').prop('scrollHeight')
 

Answer 4

Est-ce ce que vous recherchez ?

 var scroller = $('#overflowareaID');
var contents = scroller.wrapInner('<div>').children(); // wrap a div around the contents
var height = contents.outerHeight(); // read the inner divs height
contents.replaceWith( contents.html() ); // unwrap the inner div

// use the height variable now ..
 

Démo sur http://jsfiddle.net/gaby/uFQVt/

Answer 5

Element.scrollHeight est une propriété, non pas une fonction, comme indiqué ici. Comme indiqué ici, le scrollHeight propriété est uniquement pris en charge après IE8. Si vous avez besoin de travailler à avant que, temporairement mis le CSS overflow et height de auto, ce qui va provoquer la div pour prendre le maximum de la hauteur des besoins. Puis obtenir la hauteur, et de modifier les propriétés de retourner à ce qu'ils étaient avant.