Paul
Ich versuche, die Position der Bildlaufleiste des Browsers mit JavaScript zu erkennen, um zu entscheiden, wo auf der Seite die aktuelle Ansicht ist.
Ich vermute, dass ich erkennen muss, wo sich der Daumen auf der Spur befindet, und dann die Höhe des Daumens als Prozentsatz der Gesamthöhe der Spur. Mache ich es zu kompliziert oder bietet JavaScript eine einfachere Lösung? Wie würde ein Code aussehen?
Max Shawabkeh
Sie können verwenden element.scrollTop und element.scrollLeft um den vertikalen bzw. horizontalen Offset zu erhalten, der gescrollt wurde. element kann sein document.body wenn Ihnen die ganze Seite wichtig ist. Damit kann man vergleichen element.offsetHeight und element.offsetWidth (wieder, element kann der Körper sein), wenn Sie Prozentsätze benötigen.
Welchen Browser verwendest du? Das Abrufen des Körpers erfolgt in verschiedenen Browsern unterschiedlich (element und document.body waren nur Beispiele). Sehen howtocreate.co.uk/tutorials/javascript/browserwindow für Details.
– Max Shawabkeh
20. März 2010 um 1:47 Uhr
Ich habe es geschafft, mir den korrekten Wert auf Firefox 3.6 mit zu geben window.pageYOffset, aber unter IE7 funktioniert nichts. Versucht window.pageYOffset, document.body.scrollTop, document.documentElement.scrollTop, element.scrollTop
– Paulus
20. März 2010 um 2:04 Uhr
scrollTop hat bei mir nur funktioniert, wenn ich Klammern hinzugefügt habe … $(“.scrollBody”).scrollTop()
– Maia
5. Januar 2017 um 0:47 Uhr
Wenn Sie es mit dem ‘window’-Element zu tun haben, können Sie window.scrollY anstelle von window.scrollTop verwenden
– Janis Jansen
4. August 2017 um 6:16 Uhr
Ich glaube, die Bildlaufposition ist nicht aktiviert document.body in den meisten modernen Browsern – es ist normalerweise aktiviert document.documentElement jetzt. Sehen bugs.chromium.org/p/chromium/issues/detail?id=157855 für den Übergang von Chrome.
– fzzfzzfzz
3. Mai 2018 um 15:51 Uhr
Gatsby
Ich habe das für a gemacht <div> auf Chrome.
Element.scrollOben – sind die Pixel, die aufgrund der Schriftrolle oben verborgen sind. Ohne Bildlauf ist sein Wert 0.
Element.scrollHöhe – sind die Pixel des ganzen div.
Element.clientHeight – sind die Pixel, die Sie in Ihrem Browser sehen.
var a = element.scrollTop;
wird die Stelle sein.
var b = element.scrollHeight - element.clientHeight;
wird sein maximal Wert für nach oben scrollen.
var c = a / b;
wird der Prozentsatz der Schriftrolle sein [from 0 to 1].
Das ist fast richtig. für var b sollten Sie window.innerHeight nicht element.clientHeight subtrahieren.
– Kahlos
19. März 2016 um 2:39 Uhr
Danke Alter Sport!
– hngr18
29. Juni 2021 um 12:42 Uhr
Warum ist das nicht die Antwort? Guter Arbeitskollege
– BoundForGlory
1. Oktober 2021 um 15:41 Uhr
kennebec
document.getScroll = function() {
if (window.pageYOffset != undefined) {
return [pageXOffset, pageYOffset];
} else {
var sx, sy, d = document,
r = d.documentElement,
b = d.body;
sx = r.scrollLeft || b.scrollLeft || 0;
sy = r.scrollTop || b.scrollTop || 0;
return [sx, sy];
}
}
gibt ein Array mit zwei ganzen Zahlen zurück- [scrollLeft, scrollTop]
Es wäre toll gewesen, die Verwendung dieser Funktion anhand eines Beispiels zu zeigen.
– Benutzer18490
31. Juli 2014 um 9:24 Uhr
Ich denke, Sie können dies verwenden lastscroll = getScroll(); window.scrollTo(letzterScroll[0]letzte Rolle[1]);
– Dinesh Rajan
14. Dezember 2014 um 14:28 Uhr
Funktioniert großartig, aber ich habe die Rückkehr zu einem Objekt mit x- und y-Tasten geändert, da das für mich etwas sinnvoller ist.
– xd6_
24. Juli 2015 um 15:34 Uhr
Bearbeitet nach dem Kommentar von @ user18490 .
– David Cannizzo
3. Januar 2018 um 14:34 Uhr
ReferenceError: Variable kann nicht gefunden werden: Element
– Jonny
16. September 2018 um 15:59 Uhr
Brayan Pfarrer
Es ist so 🙂
window.addEventListener("scroll", (event) => {
let scroll = this.scrollY;
console.log(scroll)
});
Str
Antwort für 2018:
Der beste Weg, solche Dinge zu tun, ist die Verwendung von Schnittmengenbeobachter-API.
Die Schnittmengenbeobachter-API bietet eine Möglichkeit, Änderungen an der Schnittmenge eines Zielelements mit einem Vorgängerelement oder mit dem Ansichtsfenster eines Dokuments der obersten Ebene asynchron zu beobachten.
In der Vergangenheit war die Erkennung der Sichtbarkeit eines Elements oder der relativen Sichtbarkeit zweier Elemente im Verhältnis zueinander eine schwierige Aufgabe, für die Lösungen unzuverlässig waren und dazu neigten, den Browser und die Websites, auf die der Benutzer zugreift, träge zu machen. Leider ist mit zunehmender Reife des Internets auch der Bedarf an dieser Art von Informationen gewachsen. Kreuzungsinformationen werden aus vielen Gründen benötigt, z. B.:
- Lazy-Loading von Bildern oder anderen Inhalten, während eine Seite gescrollt wird.
- Implementieren von „Infinite Scrolling“-Websites, bei denen beim Scrollen immer mehr Inhalte geladen und gerendert werden, sodass der Benutzer nicht durch die Seiten blättern muss.
- Berichterstattung über die Sichtbarkeit von Werbung, um Werbeeinnahmen zu berechnen.
- Entscheiden, ob Aufgaben oder Animationsprozesse ausgeführt werden sollen oder nicht, basierend darauf, ob der Benutzer das Ergebnis sehen wird oder nicht.
Die Implementierung der Schnittpunkterkennung in der Vergangenheit umfasste Ereignishandler und Schleifen, die Methoden wie Element.getBoundingClientRect() aufriefen, um die erforderlichen Informationen für jedes betroffene Element aufzubauen. Da dieser gesamte Code im Hauptthread ausgeführt wird, kann selbst einer davon Leistungsprobleme verursachen. Wenn eine Seite mit diesen Tests geladen wird, können die Dinge geradezu hässlich werden.
Siehe folgendes Codebeispiel:
var options = { root: document.querySelector('#scrollArea'), rootMargin: '0px', threshold: 1.0 } var observer = new IntersectionObserver(callback, options); var target = document.querySelector('#listItem'); observer.observe(target);
Die meisten modernen Browser unterstützt den IntersectionObserveraber Sie sollten die verwenden Polyfill für Abwärtskompatibilität.
Es ist eine unglückliche Schwäche von SO, dass Antworten, die als richtig akzeptiert werden, (ohne Verschulden des Antwortenden) falsch werden können, aber für immer als akzeptiert stecken bleiben. Die akzeptierte Antwort ist jetzt für den Fall document.body völlig falsch geworden, da, wie @fzzfzzfzz in einem Kommentar zur akzeptierten Antwort sagte, „die Bildlaufposition in den meisten modernen Browsern nicht auf document.body festgelegt ist – sie ist normalerweise auf document.body festgelegt .documentElement jetzt. Siehe bugs.chromium.org/p/chromium/issues/detail?id=157855 für die Umstellung von Chrome.” Idealerweise würde diese 2018 Intersection Observer API-Antwort als neue akzeptierte Antwort festgelegt werden.
– Jakob C.
10. November 2021 um 22:30 Uhr
Wenn Ihnen die ganze Seite wichtig ist, können Sie Folgendes verwenden:
document.body.getBoundingClientRect().top
Es ist eine unglückliche Schwäche von SO, dass Antworten, die als richtig akzeptiert werden, (ohne Verschulden des Antwortenden) falsch werden können, aber für immer als akzeptiert stecken bleiben. Die akzeptierte Antwort ist jetzt für den Fall document.body völlig falsch geworden, da, wie @fzzfzzfzz in einem Kommentar zur akzeptierten Antwort sagte, „die Bildlaufposition in den meisten modernen Browsern nicht auf document.body festgelegt ist – sie ist normalerweise auf document.body festgelegt .documentElement jetzt. Siehe bugs.chromium.org/p/chromium/issues/detail?id=157855 für die Umstellung von Chrome.” Idealerweise würde diese 2018 Intersection Observer API-Antwort als neue akzeptierte Antwort festgelegt werden.
– Jakob C.
10. November 2021 um 22:30 Uhr
Simon der Lachs
Wenn Sie jQuery verwenden, gibt es eine perfekte Funktion für Sie: .scrollTop()
doc hier -> http://api.jquery.com/scrollTop/
Hinweis: Mit dieser Funktion können Sie die Position abrufen ODER festlegen.
siehe auch: http://api.jquery.com/?s=scroll
Warum eine Frage zu JS mit einer Bibliothek für JS beantworten, wenn es durchaus möglich und sogar bequem ist, dies in rohem JS zu tun? Sie bitten ihn nur, zusätzliche Ladezeit hinzuzufügen und etwas Speicherplatz für etwas völlig Unnötiges zu verbrauchen. Seit wann bedeutet Javascript JQuery?
– Benutzer2490157
2. April 2016 um 23:57 Uhr
Wenn Sie individuell fragen, mochte ich jQuery nie und ich habe diese Frage nicht beantwortet, aber in Vanilla JS gibt es bereits Antworten von anderen Kollegen. Was ist dann ein Problem, wenn jemand diesem Thread eine leckere Würze hinzugefügt hat? Sie verwenden jQuery)
– Ravinder Payal
3. April 2016 um 6:01 Uhr
@ R01010010, weil JQuery heutzutage nutzlos und kontraproduktiv ist, alle Funktionen von JQuery einfach mit VanilaJS implementiert werden können und Sie auch abhängig von dem sind, was in JQuery enthalten ist, da in VanillsaJS neue Funktionen verfügbar sind, werden Sie als Programmierer nicht aktualisiert, nur als Beispiel , heutzutage gibt es eine neue API in VanillaJS namens fetch, die das alte XHR ersetzt hat, wenn Sie nur in der Welt von JQuery waren, werden Sie nie die Vorteile von fetch sehen und weiterhin jQuery.ajax() verwenden. Meine persönliche Meinung ist, dass Leute, die fortfahren mit JQuery, weil sie aufgehört haben zu lernen. Auch VanillaJS ist schneller vanilla-js.com
– John Balvin Arien
6. Juni 2018 um 4:06 Uhr
@JohnBalvinArias spricht über Fetch, was ist los auf ie11 oder sogar Edge?
– Ben
1. November 2018 um 21:34 Uhr
Korrigieren Sie mich, wenn ich falsch liege, aber fetch funktioniert nicht richtig auf “modern”, dh, und wird immer noch häufig verwendet. Wenn ich jquery verwenden würde, würde ich kaum ermutigt, weiterzumachen
– Ben
1. November 2018 um 23:22 Uhr
