Obtenir la hauteur visible d'un div avec jQuery

J'ai besoin de récupérer la hauteur visible d'une div à l'intérieur d'une zone déroulante. Je me considère assez décent avec jQuery, mais ce n'est absolument me jetant hors.

Disons que j'ai une div rouge à l'intérieur d'un noir wrapper:

Dans le graphique ci-dessus, la fonction jQuery serait de retour 248, la partie visible de la div.

Obtenir la hauteur visible d'un div avec jQuery

Une fois que l'utilisateur fait défiler au dessus de la div, comme dans le graphique ci-dessus, il ferait rapport 296.

Obtenir la hauteur visible d'un div avec jQuery

Maintenant, une fois que l'utilisateur est déjà passé de la div, il serait à nouveau rapport 248.

Évidemment, mes chiffres ne vont pas être aussi cohérente et claire comme ils sont dans cette démo, ou je venais de coder en dur pour ces chiffres.

J'ai un peu de théorie:

Obtenir la hauteur de la fenêtre
Obtenir la hauteur de la div
Obtenir le décalage initial de la div du haut de la fenêtre
Obtenir le décalage que l'utilisateur fait défiler.
- Si le décalage est positif, cela signifie que le haut de la div est toujours visible.
- si elle est négative, le haut de la div a été éclipsée par la fenêtre. À ce stade, la div pourrait être de prendre toute la hauteur de la fenêtre, ou le bas de la div pourrait montrer
- Si le bas de la div est de montrer, à comprendre le fossé entre elle et le bas de la fenêtre.

Il semble assez simple, mais j'ai juste ne peut pas envelopper la tête autour de lui. Je vais prendre une autre fissure demain matin; j'ai juste pensé que certains d'entre vous génies pourriez être en mesure de vous aider.

Merci!

Mise à JOUR: j'ai compris cela sur mon propre, mais ressemble à l'une des réponses ci-dessous est plus élégant, de sorte que je vais utiliser à la place. Pour les curieux, voici ce que je suis venu avec:

$(document).ready(function() {
    var windowHeight = $(window).height();
    var overviewHeight = $("#overview").height();
    var overviewStaticTop = $("#overview").offset().top;
    var overviewScrollTop = overviewStaticTop - $(window).scrollTop();
    var overviewStaticBottom = overviewStaticTop + $("#overview").height();
    var overviewScrollBottom = windowHeight - (overviewStaticBottom - $(window).scrollTop());
    var visibleArea;
    if ((overviewHeight + overviewScrollTop) < windowHeight) {
        //alert("bottom is showing!");
        visibleArea = windowHeight - overviewScrollBottom;
        //alert(visibleArea);
    } else {
        if (overviewScrollTop < 0) {
            //alert("is full height");
            visibleArea = windowHeight;
            //alert(visibleArea);
        } else {
            //alert("top is showing");
            visibleArea = windowHeight - overviewScrollTop;
            //alert(visibleArea);
        }
    }
});

Je veux le regarder dans vh unités. 1vh = 1/100ème de la fenêtre d'affichage de la hauteur. Vous trouverez probablement une solution à cela. Trouver la hauteur de la fenêtre d'affichage, la hauteur de l'élément, la position des éléments, et la position de défilement et de calculer en conséquence.
En supposant qu'il existe de la marge à l'intérieur de la DIV, dire "10px" tout autour. Je détecte la hauteur de défilement pour voir si c'est passé "10", alors je voudrais juste avoir la hauteur de l'élément parent, soustraire basé sur le défilement de la hauteur.
Si tout le reste échoue, je suis tombé sur ce script qui ressemble, il peut servir le but, vous avez besoin de: larsjung.de/fracs

InformationsquelleAutor JacobTheDev | 2014-07-15

55

Ici est un moyen rapide et sale concept. Essentiellement, il compare les offset().top de l'élément en haut de la fenêtre, et le offset().top + height() au bas de la fenêtre:
```
function getVisible() {    
    var $el = $('#foo'),
        scrollTop = $(this).scrollTop(),
        scrollBot = scrollTop + $(this).height(),
        elTop = $el.offset().top,
        elBottom = elTop + $el.outerHeight(),
        visibleTop = elTop < scrollTop ? scrollTop : elTop,
        visibleBottom = elBottom > scrollBot ? scrollBot : elBottom;
    $('#notification').text(visibleBottom - visibleTop);
}

$(window).on('scroll resize', getVisible);
```
Exemple de violon

modifier - petite mise à jour à effectuer la logique lorsque la fenêtre est redimensionnée.
- Je vais avoir de la difficulté à mettre cela pour de multiples divs sans répéter le code. Est-il un moyen de faire cela?
- ici, vous allez: jsfiddle.net/b5DGj/1. Je me suis séparé de chaque élément, la fonction d'appel. On pourrait même aller plus loin et définir un plugin pour le faire pour vous.
- J'ai légèrement réécrit @RoryMcCrossan l'approche de fonctionner comme un plugin jQuery et l'a posté une réponse ci-dessous - il peut avoir plus d'une application générale dans ce format.
- Parfois, un élément peut être masquée en partie à cause de débordement ou d'un parent éléments, quelle que soit la "fenêtre"
InformationsquelleAutor Rory McCrossan
46

Calculer la quantité de px un élément (hauteur) est dans la fenêtre d'affichage

Violon démo

Ce petit fonction sera de retour le montant de px un élément est visible dans le (vertical) Fenêtre d'affichage:
```
function inViewport($el) {
    var elH = $el.outerHeight(),
        H   = $(window).height(),
        r   = $el[0].getBoundingClientRect(), t=r.top, b=r.bottom;
    return Math.max(0, t>0? Math.min(elH, H-t) : Math.min(b, H));
}
```
À utiliser comme:
```
$(window).on("scroll resize", function(){
  console.log( inViewport($('#elementID')) ); //n px in viewport
});
```
que c'est.

jQuery .inViewport() Plugin

jsFiddle démo

de la ci-dessus, vous pouvez extrait la logique et de créer un plugin comme celui-ci:
```
/**
 * inViewport jQuery plugin by Roko C.B.
 * http://stackoverflow.com/a/26831113/383904
 * Returns a callback function with an argument holding
 * the current amount of px an element is visible in viewport
 * (The min returned value is 0 (element outside of viewport)
 */
;(function($, win) {
  $.fn.inViewport = function(cb) {
     return this.each(function(i,el) {
       function visPx(){
         var elH = $(el).outerHeight(),
             H = $(win).height(),
             r = el.getBoundingClientRect(), t=r.top, b=r.bottom;
         return cb.call(el, Math.max(0, t>0? Math.min(elH, H-t) : Math.min(b, H)));  
       }
       visPx();
       $(win).on("resize scroll", visPx);
     });
  };
}(jQuery, window));
```
À utiliser comme:
```
$("selector").inViewport(function(px) {
  console.log( px ); //`px` represents the amount of visible height
  if(px > 0) {
    //do this if element enters the viewport //px > 0
  }else{
    //do that if element exits  the viewport //px = 0
  }
}); //Here you can chain other jQuery methods to your selector
```
votre sélecteurs de façon dynamique écouter de la fenêtre scroll et resize mais aussi revenir à la valeur initiale sur les DOM prêt creux de la première fonction de rappel argument px.
- De travail sur Android et Chrome, vous pouvez avoir besoin d'ajouter <meta name="viewport" content="width=your_size"> en tête de section de html.
- merci pour votre contribution, mais je ne suis pas sûr content="width=1259" peut convenir à la majorité. Avez-vous essayé content="width=device-width, initial-scale=1" à la place?
- Le Site a hérité modèle avec une largeur fixe et n'est pas sensible... je pense que votre suggestion sera ok pour la majorité. Donc pour être clair: si Roko C. Buljan la solution ne fonctionne pas, essayez d'ajouter <meta name="viewport" content="your_content"> déclaration 🙂
- C'est tellement génial et tellement proche de ce que j'ai été la recherche de. Comment puis-je calculer la distance entre les éléments bas vers le bas de la fenêtre? Donc, je peux charger plus de contenu avant de voir la fin du contenu. Par exemple, si elBottom < 200 de windowBot, le feu AJAX.
- ainsi, la méthode ci-dessus ne renvoie pas les autres valeurs spécifiques (il peut être étendu à retourner plus de choses que juste visible height px, comme un objet. Voir ce violon pour une telle idée: jsfiddle.net/RokoCB/6xjq5gyy (open developer console pour voir les logs)
- Merci pour l'aide. J'ai ce travail, de sorte que vous faites défiler la page, les pages chargées. Fonctionne très bien. J'ai maintenant le problème de ce qui se passe quand vous venez dans le milieu de la page et besoin de charger des pages précédentes. J'ai essayé d'inverser l'ensemble de la chose, mais depuis les pages sont chargées ci-dessus, le haut de l'espace devient de plus en plus gros, et toutes les pages sont chargées à la fois, pas comme vous le faites défiler et ils sont nécessaires. Des idées sur la façon de réaliser le chargement des pages précédentes que vous faites défiler vers le haut?
- au lieu de (b<H?b:H) vous pourriez avoir écrit Math.min(b, H)
- getBoundingClientRect n'existent pas pour moi
- elle existe, elle existe: caniuse.com/#feat=getboundingclientrect Vous avez juste à apprendre à l'utiliser. Ou au moins voir les erreurs dans la console et commencer par la fixation de ceux-ci.
InformationsquelleAutor Roko C. Buljan

Ici est une version de Rory de l'approche ci-dessus, à l'exception écrit pour fonctionner comme un plugin jQuery. Il peut avoir plus d'une application générale dans ce format. Super réponse, Rory - merci!

$.fn.visibleHeight = function() {
    var elBottom, elTop, scrollBot, scrollTop, visibleBottom, visibleTop;
    scrollTop = $(window).scrollTop();
    scrollBot = scrollTop + $(window).height();
    elTop = this.offset().top;
    elBottom = elTop + this.outerHeight();
    visibleTop = elTop < scrollTop ? scrollTop : elTop;
    visibleBottom = elBottom > scrollBot ? scrollBot : elBottom;
    return visibleBottom - visibleTop
}

Peut être appelé par le suivant:

$("#myDiv").visibleHeight();

jsFiddle

Ne fonctionne pas dans le cas où la fenêtre devient plus grand et le bloc peut s'adapter. C'est pourquoi nous avons besoin de réinitialiser le bloc hauteur: $(this).css('height', "); jsfiddle.net/b5DGj/144

InformationsquelleAutor Michael.Lumley

Vous devez vous connecter pour publier un commentaire.

Calculer la quantité de px un élément (hauteur) est dans la fenêtre d'affichage

jQuery .inViewport() Plugin

jsFiddle

jQuery `.inViewport()` Plugin