$ (document) .scrollTop () gibt immer 0 zurück

73

Ich versuche einfach, etwas zu tun, sobald die Bildlaufposition der Seite eine bestimmte Höhe erreicht hat. Gibt scrollTop()jedoch 0 zurück oder nullegal wie weit ich scrolle. Dies ist die Hilfefunktion, mit der ich den scrollTop()Wert überprüfe :

$('body').click(function(){
    var scrollPost = $(document).scrollTop();
    alert(scrollPost);
});

Ich habe versucht , Befestigung scrollTop()an $('body'), $('html')und natürlich $(window), aber nichts ändert.

Irgendwelche Ideen?

jetlej
quelle
2
Keine Antwort, sondern eine Randnotiz ... Normalerweise verwende ich das jQuery-Wegpunkt-Plugin für solche Dinge. getkickstrap.com/apps/waypoints-987090
Adam Grant
1
Ich möchte wirklich kein Skript verwenden, um eine extrem einfache Javascript-Funktion zu ersetzen.
Jetlej
4
Ihr Code funktioniert für mich: jsfiddle.net/ZA7Uj
Denys Séguret
1
Es funktioniert in dieser jsfiddle mit Firefox
Halex
1
@jetlej Einige Informationen zu Ihrer Umgebung können hilfreich sein. Es scheint, dass Ihr Code für einige funktioniert (ich eingeschlossen - Chrome unter OS X). Mit welchem ​​Betriebssystem / Browser arbeiten Sie?
Whymarrh

Antworten:

118

Aus irgendeinem Grund wurde dieses Problem behoben, indem 'height: 100%' aus meinen HTML- und Body-Tags entfernt wurde.

Ich hoffe das hilft jemand anderem!

jetlej
quelle
2
Die einfache Lösung für dieses Problem besteht darin, die maximale Höhe für Körper und HTML anstelle der Höhe festzulegen.
Jwaern
Dies wird durch einen Fehler in Chrome verursacht, der sehr bald behoben werden soll
Stuart P. Bentley
14
Für diejenigen von uns, die jQuery nicht verwenden, ist meine Empfehlung, window.scrollYstattdessen zu verwenden .
Stuart P. Bentley
1
nur eine Randnotiz; Ich habe festgestellt, dass das scrollTop()in allen Browsern inkonsistent ist und mit dem Layout des HTML gemessen werden kann. Es scheint, dass Ihre 100% -Höhe wahrscheinlich darauf zurückzuführen ist, dass ein Element in Ihrem BODYTag gescrollt hat und nicht das BODYTag selbst. Sobald Sie Ihren Körper auf volle Höhe gebracht haben, wurde darauf gescrollt, was Sie dann zum scrollTopGebrauch gemacht hat.
Guy Park
auf was hast du es eingestellt für mich bodyist eingestellt, height: autowas ich glaube, es auch
vermasselt
47

Ich hatte das gleiche Problem mit scroll = 0 in:

document.body.scrollTop

Nächstes Mal verwenden

document.scrollingElement.scrollTop

Bearbeiten 01.06.2018

Wenn Sie verwenden, haben eventSie ein Objekt, das ein documentElement in targetoder enthält srcElement. BeispielHier ist eine Tabelle, die den Bildlaufvorgang in verschiedenen Browsern zeigt.

Geben Sie hier die Bildbeschreibung ein

Wie Sie sehen können, haben Firefox und IE nicht srcElementund IE 11 unterstützt nicht scrollingElement.

Verri
quelle
2
ist document.scrollingElement.scrollTopmobilfreundlich?!
Oldboy
Ich weiß nicht, jetzt benutze ich documentElementstattdessen scrollingElementund es funktioniert;)
Verri
Ich habe solche Probleme bei der Implementierung dieser Funktion. Ich habe es in der Vergangenheit erfolgreich gemacht und jetzt stoße ich auf so viele Komplikationen. Würde es Ihnen etwas ausmachen, einen Blick auf diese Frage zu werfen , die ich bei SO gepostet habe, um zu sehen, ob Sie etwas falsches an dem sehen können, was ich tue?
Oldboy
9

Meine Lösung, nachdem ich einige der oben genannten Versuche unternommen habe und bei denen kein CSS geändert werden muss:

var scroll_top = Math.max( $("html").scrollTop(), $("body").scrollTop() )

Dies funktioniert in aktuellen Versionen von Chrome, Firefox, IE und Edge.

Steve Lockwood
quelle
htmlDas Scrolltop hat bei mir funktioniert. Nichts anderes hat es getan body. Ich verwende jedoch auch Bootstrap 4 und habe keine Ahnung, was es mit der Seite hinter den Kulissen macht.
felwithe
6

Ich habe nur ein Add-On für diejenigen, die den gleichen Fehler machen könnten wie ich. Mein Code war wie folgt:

var p = $('html,body');
$( ".info" ).text( "scrollTop:" + p.scrollTop() );

Dieser Code funktioniert in allen Browsern mit Ausnahme von Webkits wie Browsern wie Chrome und Safari, da das <html>Tag immer einen scrollTop-Wert von Null oder Null hat.

Die anderen Browser ignorieren dies, während die Browser des Webkits dies nicht tun.

Die einfachste Lösung besteht darin, das HTML-Tag aus Ihrem Code et Voila zu entfernen:

var p = $('body');
$( ".info" ).text( "scrollTop:" + p.scrollTop() );
Kamba-Bilola Ted
quelle
6

Das Entfernen height: 100%;von HTML- und Body-Tags kann das Problem beheben.

Der Grund dafür ist, dass Sie möglicherweise 100% als Wert für die height-Eigenschaft von HTML- und Body-Elementen festgelegt haben. Wenn Sie die height-Eigenschaft von HTML- und Body-Elementen auf 100% festlegen, erhalten sie eine Höhe, die der Höhe des Dokuments entspricht.

Dawood Najam
quelle
Während dies theoretisch die Frage beantworten kann, wäre es vorzuziehen , die wesentlichen Teile der Antwort hier aufzunehmen und den Link als Referenz bereitzustellen.
LW001
Der Link ist tot.
Andreas Baumgart
Und die Seite ist wieder unten.
sp00n
@ sp00n Ich werde den Link entfernen. Die notwendigen Informationen dieser Seite sind bereits hier geschrieben.
Dawood Najam
1

hatte das gleiche Problem. scrollTop () funktioniert mit einigen Blöcken, die kein Dokument oder Text sind. Damit diese Methode funktioniert, sollten Sie Höhe und Überlaufstil für Ihren Block hinzufügen:

#scrollParag {
    height: 500px;
    overflow-y: auto;
}

Und dann:

var scrolParag = document.getElementById('scrollParag');
 alert(scrolParag.scrollTop); // works!
Vasyl Gutnyk
quelle
1

Scroll Top gab auch für mich immer 0 zurück. Ich habe es verwendet, um den Fokus auf das spezifische Element auf einer Seite zu richten. Ich habe dazu einen anderen Ansatz gewählt.

document.getElementById ("elementID"). scrollIntoView ();

Funktioniert gut für mich auf Mobilgeräten, Tablets und Desktops.

Hiral Patel
quelle
1
var bodyScrollTop = Math.max(document.scrollingElement.scrollTop, document.documentElement.scrollTop) 

sollte auf modernen Browsern funktionieren.

Chaosifier
quelle
0

Übrigens scheint es, dass Sie verwenden sollten

$("body").scrollTop()

Anstatt von

$(".some-class").scrollTop

Deshalb stecke ich fest.

ch271828n
quelle