Come ottenere la posizione della barra di scorrimento con Javascript?

Sto cercando di rilevare la posizione della barra di scorrimento del browser con JavaScript per decidere dove si trova la pagina corrente. La mia ipotesi è che devo rilevare dove si trova il pollice sulla traccia e quindi l'altezza del pollice in percentuale dell'altezza totale della traccia. Lo sto complicando troppo o JavaScript offre una soluzione più semplice di quella? Qualche idea in termini di codice?

È possibile utilizzare element.scrollTope element.scrollLeftper ottenere l'offset verticale e orizzontale, rispettivamente, che è stato fatto scorrere. elementpuò essere document.bodyse ti interessa l'intera pagina. Puoi confrontarlo con element.offsetHeighte element.offsetWidth(di nuovo, elementpotrebbe essere il corpo) se hai bisogno di percentuali.

L'ho fatto per un <div>su Chrome.

element .scrollTop - sono i pixel nascosti in alto a causa dello scorrimento. Senza scorrimento il suo valore è 0.

element .scrollHeight - è il pixel dell'intero div.

element .clientHeight - è i pixel che vedi nel tuo browser.

var a = element.scrollTop;

sarà la posizione.

var b = element.scrollHeight - element.clientHeight;

sarà il valore massimo per scrollTop .

var c = a / b;

sarà la percentuale di scorrimento [da 0 a 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];
    }
}

restituisce un array con due numeri interi- [scrollLeft, scrollTop]

è così :)

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

Risposta per il 2018 :

Il modo migliore per fare cose del genere è utilizzare l' API di Intersection Observer .

L'API di Intersection Observer fornisce un modo per osservare in modo asincrono i cambiamenti nell'intersezione di un elemento target con un elemento antenato o con la vista di un documento di livello superiore.

Storicamente, rilevare la visibilità di un elemento o la relativa visibilità di due elementi l'uno rispetto all'altro, è stato un compito difficile per il quale le soluzioni sono state inaffidabili e inclini a causare il rallentamento del browser e dei siti a cui l'utente accede. Sfortunatamente, con la maturità del web, è cresciuta la necessità di questo tipo di informazioni. Le informazioni sull'intersezione sono necessarie per molte ragioni, come ad esempio:

• Caricamento lento di immagini o altri contenuti durante lo scorrimento di una pagina.
• Implementazione di siti Web a "scorrimento infinito", in cui sempre più contenuti vengono caricati e resi durante lo scorrimento, in modo che l'utente non debba sfogliare le pagine.
• Segnalazione della visibilità degli annunci pubblicitari al fine di calcolare le entrate pubblicitarie.
• Decidere se eseguire o meno attività o processi di animazione in base alla visualizzazione o meno del risultato da parte dell'utente.

L'implementazione del rilevamento delle intersezioni in passato implicava gestori di eventi e cicli che chiamavano metodi come Element.getBoundingClientRect () per creare le informazioni necessarie per ogni elemento interessato. Poiché tutto questo codice viene eseguito sul thread principale, anche uno di questi può causare problemi di prestazioni. Quando un sito viene caricato con questi test, le cose possono diventare davvero brutte.

Vedi il seguente esempio di codice:

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

La maggior parte dei browser moderni supporta IntersectionObserver , ma è necessario utilizzare il polyfill per la compatibilità con le versioni precedenti.

se ti interessa l'intera pagina. puoi usare questo:

document.body.getBoundingClientRect().top

Se stai usando jQuery c'è una funzione perfetta per te: .scrollTop ()

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

nota: è possibile utilizzare questa funzione per recuperare O impostare la posizione.

vedi anche: http://api.jquery.com/?s=scroll

Ecco l'altro modo per ottenere la posizione di scorrimento

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

Penso che la seguente funzione possa aiutare ad avere valori di coordinate di scorrimento:

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

Ho avuto questa idea da questa risposta con un piccolo cambiamento.