Comment puis-je obtenir la hauteur d'une div à l'intégralité du contenu avec jQuery?

Je suis en train de créer mes propres barres de défilement. J'ai essayé la plupart de jquery, la barre de défilement plugins et aucun d'entre eux semblent fonctionner pour moi, alors j'ai décidé de créer mon propre. J'ai un débordement de zone avec défilement de contenu. Je peux obtenir la barre de défilement de travailler si je suis en mesure de déterminer la hauteur du défilement de la zone de contenu. J'ai essayé .scrollHeight() et le navigateur ne prend même pas la reconnaître. Le débordement de la zone a une position fixe.

InformationsquelleAutor mtlca401 | 2011-07-28
  1. 125

    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.

    Donné 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).

    • Chaque où je l'ai lu à propos de scrollHeight, personne n'a jamais dit que l' [0] est nécessaire et que scrollheight n'est pas une fonction. Je suis en supposant que, après avoir essayé ce que j'ai eu la bonne hauteur. Je sais pas jusqu'à ce que j'mettre en œuvre les calculs de la barre de défilement. Mais, vous obtenez des points. Merci!
    • Vous avez besoin de la [0] pour extraire les sous-jacents objet DOM à partir de l'objet jQuery, qui vous donne le même genre de chose que document.getElementById() vais vous donner. Vous pouvez également utiliser du jQuery get de la fonction.
    • Je reçois 4260px en chrome et 4300px dans firefox, mais je suppose que c'est à cause de rembourrage peut-être? Est-ce correct?
    • pourrait être beaucoup de choses (les marges, les rembourrages, hauteur de la ligne, le rendu des polices différences, ...), ~1% de différence n'est pas beaucoup.
    • Si vous souhaitez que le réel scrollTop hauteur, vous aurez besoin scrollLength = $('#x')[0].scrollHeight - $('#x').height();
    • +1 pour la solution de et les crêpes.
    • Cela ne semble pas fonctionner dans Opera 12
    • Est Opera 12 de l'ancien Opéra ou Opéra-Prochaine? Ce qui ne "fonctionne pas" signifie?
    • Eh bien, je veux dire qu'il ne parvient pas à calculer le contenu de la hauteur correctement. Si le conteneur a une hauteur fixe avec overflow:scroll, puis il obtient le height du contenant, pas le contenu. Je parle de Opera 12.16, l'ancienne version du navigateur Opera, qui sont encore utilisés par de nombreuses personnes. La dernière version qui n'inclut pas de moteur Webkit.
    • Ne Shazboticus S Shazbot de l' le travail?

    InformationsquelleAutor mu is too short
  2. 33

    Si vous pouvez éventuellement l'aider, NE PAS l'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

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

    vous aurez 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.

    • +1 l'étude de la propriété!
    • depuis scrollHeight est une propriété DOM, ne devriez-vous pas être à l'aide de $('#outer').get(0).scrollHeight à la place?
    InformationsquelleAutor Shazboticus S Shazbot
  3. 31

    On peut aussi utiliser - 

    $('#x').prop('scrollHeight') <!-- Height -->
$('#x').prop('scrollWidth')  <!-- Width -->
    • Je vous remercie. C'était exactement ce dont j'avais besoin. Pure jQuery.
    InformationsquelleAutor Anmol Saraf
  4. 5

    Element.scrollHeight est une propriété, non pas une fonction, comme l'a noté ici. Comme l'a noté 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 à auto, qui sera la cause de 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.

    InformationsquelleAutor Sajid
  5. 1

    Vous pouvez l'obtenir avec .outerHeight().

    Parfois, il sera de retour 0. Pour les meilleurs résultats, vous pouvez l'appeler dans votre divprêt événement.

    Pour être sûr, vous ne devriez pas régler la hauteur de l' div à x. Vous pouvez garder sa hauteur auto pour obtenir le contenu remplis correctement avec la bonne hauteur.

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

    Vous pouvez trouver un poste détaillée ici.

    InformationsquelleAutor open and free
  6. 1
    1. À l'aide de scrollHeight n'est pas seulement buggy, mais ne fonctionne pas lorsque votre conteneur a une codé en dur à la hauteur (ce qui est probablement la plupart des cas, puisque vous voulez obtenir le contenu de la hauteur sans faire container.height() lui-même)
    2. @shazboticus-s-shazbot solution est bien quand on peut s'amuser avec la hauteur du conteneur temporairement /sont codés en dur hauteur.
    3. Une solution alternative serait:

    JS:

    $('#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 option ne fonctionne que lorsque #outer n'a pas immédiatement texte pour les enfants qui prennent de la place et que vous voulez mesurer. Ce sont mes 2 cents.

    1. Si vous voulez mesurer déballé texte, je vous suggère de modifier votre arborescence DOM et avoir un intérieur <div> dont vous pouvez mesurer facilement en faisant $('#outer').children().height()
    InformationsquelleAutor Tom Roggero