Wie erhalte ich die Position der Bildlaufleiste mit Javascript?

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?

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.

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

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]

es ist so :)

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

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.

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

document.body.getBoundingClientRect().top

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

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

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.