web-dev-qa-db-fra.com

Comment obtenir la hauteur du contenu intégral d'une div avec jQuery?

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

jqueryscrollheight
61
mtlca401

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

Hauteur de la vue de défilement d'un élément; il inclut l'élément padding mais pas 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/ (exécuté avec la console JavaScript ouverte).

128
mu is too short

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

.scrollHeight ne donne pas le même type de résultats dans 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 tu fais

console.log ($ ('# externe'). scrollHeight);

vous obtiendrez 900 pixels dans Chrome, FireFox et Opera. C'est génial.

Mais, si vous associez un événement wheelevent/wheel à #outer, lorsque vous le faites défiler, Chrome vous donnera une valeur constante de 900px (correcte) mais FireFox et Opera modifiera leurs valeurs au fur et à mesure que vous ferez défiler (incorrect).

Un moyen très simple de procéder est comme ça (un peu un tricheur, vraiment). (Cet exemple fonctionne tout en ajoutant dynamiquement du contenu à #outer également):

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

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

La raison pour laquelle je choisis ces trois navigateurs est que tous les trois peuvent être en désaccord sur la valeur de .scrollHeight dans certaines circonstances. Je me suis heurté à ce problème en fabriquant ma propre liste de défilement. J'espère que ça aide quelqu'un.

33
Shazboticus S Shazbot

Nous pouvons aussi utiliser -

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

Element.scrollHeight est une propriété et non une fonction, comme indiqué ici . Comme indiqué ici , la propriété scrollHeight est uniquement prise en charge après IE8. Si vous avez besoin que cela fonctionne auparavant, définissez temporairement CSS overflow et height sur auto, ce qui obligera la div à prendre la hauteur maximale dont elle a besoin. Ensuite, obtenez la hauteur et modifiez les propriétés pour qu'elles soient comme auparavant.

5
Sajid

Vous pouvez l'obtenir avec .outerHeight().

Parfois, il retournera 0. Pour de meilleurs résultats, vous pouvez l'appeler dans votre événement prêt div.

Pour plus de sécurité, vous ne devez pas définir la hauteur de div sur x. Vous pouvez conserver sa hauteur auto pour que le contenu soit correctement rempli avec la hauteur appropriée.

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

Vous pouvez trouver un article détaillé ici .

1
open and free
  1. L'utilisation de scrollHeight n'est pas seulement un bug, mais ne fonctionne pas lorsque votre conteneur a une hauteur codée en dur (ce qui est probablement le cas dans la mesure où vous voulez obtenir la hauteur du contenu sans faire container.height() lui-même)
  2. La solution @ shazboticus-s-shazbot est utile lorsque vous pouvez modifier temporairement la hauteur du conteneur/avoir une hauteur codée en dur.
  3. Une solution alternative serait:
$('#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);

Bien sûr, cette dernière alternative ne fonctionne que lorsque #outer N'a pas de texte immédiat pour les enfants qui prennent de la place et que vous souhaitez mesurer. Ce sont mes 2 cents.

  1. Si vous souhaitez mesurer du texte non enveloppé, je vous suggérerais de modifier votre arborescence DOM et d'avoir un <div> Intérieur dont vous pouvez mesurer facilement en faisant $('#outer').children().height()
1
Tom Roggero