webentwicklung-frage-antwort-db.com.de

Die Funktion Jquery $ (window) .height () gibt keine tatsächliche Fensterhöhe zurück

Ich habe eine Seite, die ich zum dynamischen Laden von Ajax-Inhalten benötigen, wenn der Benutzer nach unten blättert. Das Problem ist, dass JQuery nicht die korrekte Fensterhöhe zurückgibt. Ich habe diese Funktion schon einmal verwendet und habe nie gesehen, dass sie fehlschlägt, aber aus irgendeinem Grund gibt sie denselben Wert wie die Dokumenthöhe zurück. Ich habe die Testseite hier: bangstyle.com/test-images

Ich habe den Alarm so programmiert, dass er beim Laden der Seite angezeigt wird und auch, wenn der Benutzer 500 Pixel unterhalb des oberen Bereiches scrollt:

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

                                    }
                            }

Ich habe bereits versucht, dies zu veröffentlichen, löschte es jedoch, da ich keine Lösung bekam. Ich hoffe, es ist in Ordnung, einen Link zu meiner Testseite zu posten. Übrigens habe ich das auf Mac Safari und Mac FF getestet. Ich habe denselben Code auf anderen Seiten ausgeführt und funktioniert einwandfrei. Ich habe das Gefühl, dass es im Dom dieser Seite etwas geben muss, das JS zum Scheitern bringt, aber keine Ahnung, was das wäre.

23
Joel Joel Binks

Schauen Sie sich Ihren HTML-Quellcode an. Die erste Zeile sollte <!DOCTYPE html> sein und Sie haben stattdessen das <style>-Tag.

Es scheint also, dass Ihr Dokument im Quirks-Modus ausgeführt wird und jQuery die korrekten Fensterabmessungen nicht berechnen kann.

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

Ich hatte das gleiche Problem ... Ich habe einige Dinge gefunden:

1) Das Problem tritt auf, wenn Sie versuchen, die tatsächliche Höhe zu ermitteln, bevor das Dokument fertiggestellt ist; 2) Das Problem tritt in Google Chrome auf, wenn Sie nicht mit corret DOCTYPE (oben erwähnt) 3 arbeiten. Es tritt immer auf Google Chrome, auch nachdem das Dokument vollständig gerendert wurde.

Für Google Chrome habe ich hier eine Problemumgehung gefunden: get-document-height-cross-browser .__ Ich verwende diese Lösung nur für google chrome und es wurde mein Problem gelöst, ich erwarte, dass jemand noch hilft habe das Problem.

3
Pontual

Dies ist eine alte Frage, aber ich hatte vor kurzem Probleme, nicht die richtige Fensterhöhe in IE10 um einige Pixel zu erhalten.

Ich entdeckte, dass der IE10 standardmäßig einen Zoom von 75% verwendet und das Fenster und die Dokumentmaße verschraubt.

Wenn Sie also eine falsche Breite oder Höhe erhalten, stellen Sie sicher, dass der Zoom auf 100% eingestellt ist.

2
ozzysong

Ich habe meine Skripte von Fuß zu Fuß verschoben und das hat es für mich gelöst.

0
harrykirsten

Haben sich einige umgesehen und sind darüber gestolpert, weiß nicht, ob es hilft, aber es lohnt sich, darüber zu sprechen. 

Warum ist $ (window) .height () so falsch?

0
westlywright

Da jquery (und dom im Allgemeinen) Größen im quirksmode nicht korrekt berechnet, gibt es zwei Lösungen:

  1. Fügen Sie oben auf Ihrer Seite doctype html hinzu (wie in der "richtigen" Antwort erwähnt) oder
  2. Verwenden Sie window.innerHeight, window.innerWidth, wenn die erste Option keine Option ist.

Ich hoffe es hilft.

0
Lex