web-dev-qa-db-fra.com

La fonction Jquery $ (window) .height () ne renvoie pas la hauteur réelle de la fenêtre

J'ai une page dont j'ai besoin pour charger dynamiquement le contenu ajax lorsque l'utilisateur fait défiler l'écran jusqu'en bas. Le problème est que JQuery ne renvoie pas la hauteur de fenêtre correcte. J'ai déjà utilisé cette fonction et je ne l'ai jamais vue échouer, mais pour une raison quelconque, elle retournera la même valeur que la hauteur du document. J'ai la page de test ici: bangstyle.com/test-images

J'ai codé l'alerte à afficher au chargement de la page et également chaque fois que l'utilisateur fait défiler 500 pixels au-dessous du sommet:

function scroller() {

                        if($(window).scrollTop() > 500){

                        delay(function(){ //200ms wait
                                pagecounter++;
                                sideshow();
                                alert("window height: " + $(window).height() + " scrolltop: " + $(window).scrollTop() + " document height: " + $(document).height());

                                return false;
                            }, 200 );

                                    }
                            }

J'ai essayé de poster ceci avant mais je l'ai supprimé car je n'avais pas trouvé de solution. J'espère que vous pourrez poster un lien vers ma page de test. BTW j'ai testé cela sur Mac Safari et Mac FF. J'ai exécuté ce même code sur d'autres pages et cela fonctionne bien. Je pense qu’il doit y avoir quelque chose dans le domaine de cette page qui cause l’échec de JS, mais aucune idée de ce que ce serait.

javascriptjquerywindowheight
23
Joel Joel Binks

Regardez votre code source HTML . La première ligne doit être <!DOCTYPE html> et vous avez la balise <style> à la place.

Il semble donc que votre document fonctionne en mode Quirks et que jQuery ne peut pas calculer les dimensions correctes de la fenêtre.

75
Inferpse
//works in chrome
$(window).bind('scroll', function(ev){

    //get the viewport height. i.e. this is the viewable browser window height
    var clientHeight = document.body.clientHeight,
        //height of the window/document. $(window).height() and $(document).height() also return this value.
        windowHeight = $(this).outerHeight(),
        //current top position of the window scroll. Seems this *only* works when bound inside of a scoll event.
        scrollY = $(this).scrollTop();

    if( windowHeight - clientHeight === scrollY ){
        console.log('bottom');
    }

});
3
Geuis

J'ai eu le même problème ... J'ai trouvé des choses:

1) le problème se produit lorsque vous essayez d'obtenir la hauteur réelle avant que le document ne soit rendu; 2) le problème se produit dans Google Chrome lorsque vous n'utilisez pas DOCTYPE correct (mentionné ci-dessus) 3) il se produit toujours dans google chrome même après le rendu complet du document.

Pour Google Chrome, j'ai trouvé une solution de contournement ici: get-document-height-cross-browser J'utilise cette solution uniquement pour Google Chrome et cela a résolu mon problème, j'espère pouvoir aider quelqu'un qui reste avoir le problème.

3
Pontual

C'est une vieille question, mais j'ai récemment eu du mal à ne pas obtenir la hauteur de fenêtre correcte dans IE10 de quelques pixels.

J'ai découvert que IE10 applique un zoom de 75% par défaut et que visse les mesures de fenêtre et de document.

Par conséquent, si vous obtenez une largeur ou une hauteur incorrecte, assurez-vous que le zoom est défini sur 100%.

2
ozzysong

J'ai déplacé mes scripts de bas de page et cela a résolu le problème pour moi.

0
harrykirsten

Quelqu'un a-t-il regardé autour de lui et est-il tombé sur ça, je ne sais pas si ça aide, mais ça vaut la peine d'être évoqué. 

pourquoi $ (window) .height () est-il si faux?

0
westlywright

Puisque jquery (et dom en général) ne calcule pas correctement les tailles en mode quirksmode, deux solutions:

  1. Ajoutez doctype html en haut de votre page (comme indiqué dans la réponse "correcte"), ou
  2. Utilisez window.innerHeight, window.innerWidth si la première option n'est pas une option.

J'espère que ça aide.

0
Lex