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

Question 1

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?

Question 2

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

Ich hoffe das hilft jemand anderem!

Question 3

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. Hier ist eine Tabelle, die den Bildlaufvorgang in verschiedenen Browsern zeigt.

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

Question 4

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.

Question 5

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

Question 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.

Question 7

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!

Question 8

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.

Question 9

var bodyScrollTop = Math.max(document.scrollingElement.scrollTop, document.documentElement.scrollTop)

sollte auf modernen Browsern funktionieren.

Question 10

Übrigens scheint es, dass Sie verwenden sollten

$("body").scrollTop()

Anstatt von

$(".some-class").scrollTop

Deshalb stecke ich fest.

Answer 1

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?

javascript jquery scrolltop 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

Answer 2

2

Keine Antwort, sondern eine Randnotiz ... Normalerweise verwende ich das jQuery-Wegpunkt-Plugin für solche Dinge. getkickstrap.com/apps/waypoints-987090

Adam Grant

Answer 3

1

Ich möchte wirklich kein Skript verwenden, um eine extrem einfache Javascript-Funktion zu ersetzen.

Jetlej

Answer 4

4

Ihr Code funktioniert für mich: jsfiddle.net/ZA7Uj

Denys Séguret

Answer 5

1

Es funktioniert in dieser jsfiddle mit Firefox

Halex

Answer 6

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

Answer 7

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

Answer 8

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

Answer 9

Dies wird durch einen Fehler in Chrome verursacht, der sehr bald behoben werden soll

Stuart P. Bentley

Answer 10

14

Für diejenigen von uns, die jQuery nicht verwenden, ist meine Empfehlung, window.scrollYstattdessen zu verwenden .

Stuart P. Bentley

Answer 11

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

Answer 12

auf was hast du es eingestellt für mich bodyist eingestellt, height: autowas ich glaube, es auch

vermasselt

Answer 13

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. Hier ist eine Tabelle, die den Bildlaufvorgang in verschiedenen Browsern zeigt.

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

Answer 14

2

ist document.scrollingElement.scrollTopmobilfreundlich?!

Oldboy

Answer 15

Ich weiß nicht, jetzt benutze ich documentElementstattdessen scrollingElementund es funktioniert;)

Verri

Answer 16

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

Answer 17

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

Answer 18

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

Answer 19

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

Answer 20

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

Answer 21

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

Answer 22

Der Link ist tot.

Andreas Baumgart

Answer 23

Und die Seite ist wieder unten.

sp00n

Answer 24

@ sp00n Ich werde den Link entfernen. Die notwendigen Informationen dieser Seite sind bereits hier geschrieben.

Dawood Najam

Answer 25

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!

Answer 26

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.

Answer 27

1

var bodyScrollTop = Math.max(document.scrollingElement.scrollTop, document.documentElement.scrollTop)

sollte auf modernen Browsern funktionieren.

Chaosifier
quelle

Answer 28

0

Übrigens scheint es, dass Sie verwenden sollten

$("body").scrollTop()

Anstatt von

$(".some-class").scrollTop

Deshalb stecke ich fest.

ch271828n
quelle

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

Antworten: