Wie erhalte ich die Position der Bildlaufleiste mit Javascript?

188

Ich versuche, die Position der Bildlaufleiste des Browsers mit JavaScript zu ermitteln, um zu entscheiden, wo auf der Seite sich die aktuelle Ansicht befindet. 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. Überkompliziere ich es oder bietet JavaScript eine einfachere Lösung? Irgendwelche Ideen in Bezug auf den Code?

Paul
quelle

Antworten:

207

Sie können element.scrollTopund verwenden element.scrollLeft, um den vertikalen bzw. horizontalen Versatz abzurufen, der gescrollt wurde. elementkann sein, document.bodywenn Sie sich um die ganze Seite kümmern. Sie können es mit element.offsetHeightund element.offsetWidth( elementmöglicherweise auch mit dem Körper) vergleichen, wenn Sie Prozentsätze benötigen.

Max Shawabkeh
quelle
2
Welchen Browser verwenden Sie? Das Abrufen des Körpers erfolgt in verschiedenen Browsern unterschiedlich ( elementund document.bodywar nur ein Beispiel). Weitere Informationen finden Sie unter howtocreate.co.uk/tutorials/javascript/browserwindow .
Max Shawabkeh
8
Ich habe es bekommen, um mir den richtigen Wert für Firefox 3.6 mit zu geben window.pageYOffset, kann aber nichts mit IE7 zum Laufen bringen. Versuchte window.pageYOffset, document.body.scrollTop, document.documentElement.scrollTop,element.scrollTop
Paul
1
scrollTop funktionierte nur für mich, als ich Klammern hinzufügte ... $ (". scrollBody"). scrollTop ()
maia
9
Wenn Sie sich mit dem 'window'-Element beschäftigen, können Sie window.scrollY anstelle von window.scrollTop verwenden
Janis Jansen
6
Ich denke, die Bildlaufposition ist document.bodyin den meisten modernen Browsern nicht aktiviert - sie ist normalerweise document.documentElementjetzt aktiviert. Informationen zum Übergang von Chrome finden Sie unter bugs.chromium.org/p/chromium/issues/detail?id=157855 .
fzzfzzfzz
134

Ich habe das für eine <div> auf Chrome gemacht.

Element .scrollTop - sind die Pixel, die aufgrund des oben ausgeblendet sind. Ohne Bildlauf ist der Wert 0.

Element .scrollHeight - sind die Pixel des gesamten Div.

Element .clientHeight - sind die Pixel, die Sie in Ihrem Browser sehen.

var a = element.scrollTop;

wird die Position sein.

var b = element.scrollHeight - element.clientHeight;

wird der Maximalwert für scrollTop sein .

var c = a / b;

wird der Prozentsatz der Schriftrolle sein [von 0 bis 1] .

Gatsby
quelle
Vielen Dank! Wahrscheinlich nicht von 0 bis 1, da Sie im Allgemeinen nicht zum unteren Rand des Elements scrollen können - richtig?
3
Das ist fast richtig. Für var b sollten Sie window.innerHeight nicht element.clientHeight subtrahieren.
Kahless
51
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 Ganzzahlen zurück - [scrollLeft, scrollTop]

kennebec
quelle
4
Es wäre großartig gewesen, zu zeigen, wie diese Funktion anhand eines Beispiels verwendet wird.
user18490
1
Ich denke, Sie können diese lastscroll = getScroll () verwenden; window.scrollTo (Lastscroll [0], Lastscroll [1]);
Dinesh Rajan
Funktioniert hervorragend, aber ich habe die Rückkehr zu einem Objekt mit x- und y-Tasten geändert, da dies für mich etwas sinnvoller ist.
xd6_
Bearbeitet nach dem Kommentar von @ user18490.
Davide Cannizzo
ReferenceError: Variable: Element kann nicht gefunden werden
Jonny
32

es ist so :)

window.addEventListener("scroll", function (event) {
    var scroll = this.scrollY;
    console.log(scroll)
});
Brayan Pastor
quelle
11

Antwort für 2018 :

Der beste Weg, dies zu tun, ist die Verwendung der Intersection Observer-API .

Die Intersection Observer-API bietet eine Möglichkeit, Änderungen im Schnittpunkt eines Zielelements mit einem Vorgängerelement oder mit dem Ansichtsfenster eines Dokuments der obersten Ebene asynchron zu beobachten.

In der Vergangenheit war das Erkennen der Sichtbarkeit eines Elements oder der relativen Sichtbarkeit zweier Elemente in Bezug zueinander eine schwierige Aufgabe, bei der Lösungen unzuverlässig waren und dazu führten, dass der Browser und die Websites, auf die der Benutzer zugreift, träge wurden. Leider ist der Bedarf an solchen Informationen mit zunehmender Reife des Webs gestiegen. Schnittinformationen werden aus vielen Gründen benötigt, z.

  • Das verzögerte Laden von Bildern oder anderen Inhalten als Seite wird gescrollt.
  • Implementieren von "Infinite Scrolling" -Websites, auf denen beim Scrollen immer mehr Inhalte geladen und gerendert werden, damit der Benutzer nicht durch die Seiten blättern muss.
  • Berichterstattung über die Sichtbarkeit von Anzeigen zur Berechnung der Werbeeinnahmen.
  • Entscheiden, ob Aufgaben oder Animationsprozesse ausgeführt werden sollen oder nicht, basierend darauf, ob der Benutzer das Ergebnis sieht oder nicht.

Die Implementierung der Kreuzungserkennung in der Vergangenheit umfasste Ereignishandler und Schleifen, die Methoden wie Element.getBoundingClientRect () aufriefen, um die erforderlichen Informationen für jedes betroffene Element zu erstellen. Da dieser gesamte Code auf dem Hauptthread ausgeführt wird, kann auch einer dieser Codes Leistungsprobleme verursachen. Wenn eine Site 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ützen den IntersectionObserver , Sie sollten jedoch die Polyfüllung aus Gründen der Abwärtskompatibilität verwenden.

str
quelle
8

wenn Sie sich für die ganze Seite interessieren. Sie können dies verwenden:

document.body.getBoundingClientRect().top

Lemospy
quelle
1
Verwenden Sie stattdessen document.body
danial dezfouli
3

Wenn Sie jQuery verwenden, gibt es eine perfekte Funktion für Sie: .scrollTop ()

Dokument 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

Simon der Lachs
quelle
25
Warum eine Frage zu JS mit einer Bibliothek für JS beantworten, wenn dies durchaus möglich und sogar bequem in rohem JS möglich ist? Sie fordern ihn lediglich auf, zusätzliche Ladezeit hinzuzufügen und Speicherplatz für etwas völlig Unnötiges zu verbrauchen. Seit wann bedeutet Javascript JQuery?
DaemonOfTheWest
4
Wenn Sie einzeln fragen, hat mir jQuery nie gefallen 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 ein leckeres Gewürz hinzugefügt hat? (Er erwähnte das bereits, wenn Sie verwenden jQuery)
Ravinder Payal
@ R01010010 Das liegt daran, dass JQuery heutzutage nutzlos und kontraproduktiv ist. Alle Funktionen von JQuery sind mit VanilaJS einfach zu implementieren. Außerdem hängen Sie davon ab, was in JQuery enthalten ist. Neue Funktionen, die in VanillsaJS verfügbar sind, werden Sie als Programmierer nicht aktualisieren, nur als Beispiel Heutzutage gibt es in VanillaJS eine neue API namens fetch, die das alte XHR ersetzt. Wenn Sie nur in der Welt von JQuery waren, werden Sie die Vorteile von fetch nie sehen und jQuery.ajax () weiterhin verwenden. Meine persönliche Meinung ist, dass Menschen fortfahren Mit JQuery haben sie aufgehört zu lernen. Auch VanillaJS ist schneller vanilla-js.com
John Balvin Arias
@ JohnBalvinArias spricht über Fetch, was ist los mit IE11 oder sogar Edge?
Ben
Korrigieren Sie mich, wenn ich falsch liege, aber das Abrufen funktioniert bei "modern" nicht richtig, dh es wird immer noch häufig verwendet. Wenn ich jquery verwenden würde, würde ich kaum ermutigt werden, weiterzumachen
Ben
3

Hier ist der andere Weg, um die Bildlaufposition zu erhalten

const getScrollPosition = (el = window) => ({
  x: el.pageXOffset !== undefined ? el.pageXOffset : el.scrollLeft,
  y: el.pageYOffset !== undefined ? el.pageYOffset : el.scrollTop
});
Gor
quelle
0

Ich denke, die folgende Funktion kann helfen, Bildlaufkoordinatenwerte zu haben:

const getScrollCoordinate = (el = window) => ({
  x: el.pageXOffset || el.scrollLeft,
  y: el.pageYOffset || el.scrollTop,
});

Ich habe diese Idee aus dieser Antwort mit einer kleinen Änderung erhalten.

AmerllicA
quelle