Jak uzyskać pozycję paska przewijania za pomocą Javascript?

Próbuję wykryć pozycję paska przewijania przeglądarki za pomocą JavaScript, aby zdecydować, gdzie na stronie jest bieżący widok. Domyślam się, że muszę wykryć, gdzie jest kciuk na ścieżce, a następnie wysokość kciuka jako procent całkowitej wysokości ścieżki. Czy nadmiernie to komplikuję, czy JavaScript oferuje łatwiejsze rozwiązanie? Wszelkie pomysły kodowe?

Możesz użyć element.scrollTopi, element.scrollLeftaby uzyskać odpowiednio przesunięcie pionowe i poziome, które zostało przewinięte. elementmoże być, document.bodyjeśli zależy Ci na całej stronie. Możesz porównać to element.offsetHeighti element.offsetWidth(ponownie, elementmoże być ciało), jeśli potrzebujesz procentów.

Zrobiłem to <div>na Chrome.

element .scrollTop - piksele ukryte u góry z powodu przewijania. Bez przewijania jego wartość wynosi 0.

element .scrollHeight - to piksele całego div.

element .clientHeight - to piksele widoczne w przeglądarce.

var a = element.scrollTop;

będzie pozycja.

var b = element.scrollHeight - element.clientHeight;

będzie maksymalną wartością scrollTop .

var c = a / b;

będzie procentem przewijania [od 0 do 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];
    }
}

zwraca tablicę z dwiema liczbami całkowitymi- [scrollLeft, scrollTop]

to jest tak :)

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

Odpowiedź na rok 2018 :

Najlepszym sposobem na zrobienie takich rzeczy jest użycie API Intersection Observer API .

Interfejs API Intersection Observer zapewnia sposób na asynchroniczne obserwowanie zmian w przecięciu elementu docelowego z elementem nadrzędnym lub z rzutnią dokumentu najwyższego poziomu.

Historycznie wykrywanie widoczności elementu lub względnej widoczności dwóch elementów względem siebie było trudnym zadaniem, dla którego rozwiązania były niewiarygodne i podatne na powodowanie, że przeglądarka i witryny, do których użytkownik wchodzi, stają się powolne. Niestety, w miarę dojrzewania sieci, zapotrzebowanie na tego rodzaju informacje wzrosło. Informacje o skrzyżowaniach są potrzebne z wielu powodów, takich jak:

• Leniwe ładowanie obrazów lub innej zawartości podczas przewijania strony.
• Implementacja stron internetowych z „nieskończonym przewijaniem”, w których coraz więcej treści jest ładowanych i renderowanych podczas przewijania, dzięki czemu użytkownik nie musi przewracać stron.
• Raportowanie widoczności reklam w celu obliczenia przychodów z reklam.
• Podejmowanie decyzji, czy wykonać zadania lub procesy animacyjne, na podstawie tego, czy użytkownik zobaczy wynik.

Implementowanie wykrywania skrzyżowań w przeszłości wymagało obsługi zdarzeń i metod wywoływania pętli, takich jak Element.getBoundingClientRect (), w celu zgromadzenia potrzebnych informacji dla każdego elementu, którego dotyczy problem. Ponieważ cały ten kod działa w głównym wątku, nawet jeden z nich może powodować problemy z wydajnością. Gdy witryna jest obciążona tymi testami, wszystko może stać się wręcz brzydkie.

Zobacz następujący przykład kodu:

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

Większość współczesnych przeglądarek obsługuje IntersectionObserver , ale powinieneś używać polifillu dla kompatybilności wstecznej.

jeśli zależy ci na całej stronie. możesz użyć tego:

document.body.getBoundingClientRect().top

Jeśli używasz jQuery, jest dla Ciebie idealna funkcja: .scrollTop ()

doc tutaj -> http://api.jquery.com/scrollTop/

Uwaga: możesz użyć tej funkcji do odzyskania LUB ustawienia pozycji.

patrz także: http://api.jquery.com/?s=scroll

Oto inny sposób uzyskania pozycji przewijania

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

Myślę, że następująca funkcja może pomóc mieć wartości współrzędnych przewijania:

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

Mam ten pomysł z tą odpowiedź z niewielkimi zmianami.