query multimediale per scorrimento verticale

Question

C'è un modo per rilevare la distanza di scorrimento verticale con una query multimediale?

Sembra che le query sui media siano progettate attorno al rilevamento del mezzo (destra scioccante: P), quindi cose come l'altezza del browser sono testabili, ma non specificatamente fino a che punto della pagina scorre.

Se non è possibile, ma si conosce un modo in JS (non jQuery) sentitevi liberi di postare!

Answer 1

Non credo sia possibile con una query multimediale CSS, ma so che l'altezza di scorrimento può essere trovata in JavaScript utilizzando window.pageYOffset. Se si voleva correre questo valore tramite una funzione ogni volta che gli utenti scorrono verso l'alto o verso il basso in una pagina, si potrebbe fare qualcosa di simile

window.onscroll = function() { 
    scrollFunctionHere(window.pageYOffset); 
}; 

O semplicemente:

window.onscroll = scrollFunctionHere; 

Se la funzione stessa controllò la valore di window.pageYOffset.

Per ulteriori consigli su come utilizzare window.onscroll in modo efficiente in JavaScript, fare riferimento a mynameistechno's answer.

Nota importante sull'efficienza: l'esecuzione di una funzione ogni volta che viene emesso un evento di scorrimento può far scorrere i cicli della CPU se nel callback viene eseguita un'operazione non banale. Invece, è buona norma consentire solo a un callback di essere eseguito tante volte al secondo. Questo è stato definito "debouncing".

Semplice codice per il gestore di eventi di scorrimento debounced di seguito. Si noti come il testo si alterna tra "Ciao" e "mondo" ogni 250ms, piuttosto che ogni singolo fotogramma:

var outputTo = document.querySelector(".output"); 
 
var timeout_debounce; 
 

 
window.addEventListener("scroll", debounce); 
 

 
function debounce(event) { 
 
    if(timeout_debounce) { 
 
     return; 
 
    } 
 

 
    timeout_debounce = setTimeout(clearDebounce, 250); 
 
// Pass the event to the actual callback. 
 
    actualCallback(event); 
 
} 
 

 
function clearDebounce() { 
 
    timeout_debounce = null; 
 
} 
 

 
function actualCallback(event) { 
 
// Perform your logic here with no CPU hogging. 
 
    outputTo.innerText = outputTo.innerText === "HELLO" 
 
    ? "WORLD" 
 
    : "HELLO"; 
 
}

p { 
 
    padding: 40vh; 
 
    margin: 20vh; 
 
    background: blue; 
 
    color: white; 
 
}

<p class="output">Test!</p>

Answer 2

Prima di tutto, la risposta accettata non funziona.

Il nome corretto è

window.onscroll 

e non

window.onScroll 

https://developer.mozilla.org/en-US/docs/Web/API/window.onscroll

In secondo luogo, questo è terribilmente inefficiente come la funzione viene chiamata modo più di quanto dovrebbe e può fare la pagina laggy quando scorre. Da John Resig:

http://ejohn.org/blog/learning-from-twitter/

molto meglio utilizzare un timer che viene eseguito ogni 150 ms o giù di lì - qualcosa di simile:

var scrolled = false; 

window.onscroll = function() { 
    scrolled = true; 
} 

setInterval(function(){ 
    if (scrolled) { 
    scrolled = false; 
    // scrollFunction() 
    } 
}, 150); 

Answer 3

in jQuery è necessario il metodo .scrollTop()

http://api.jquery.com/scrolltop/

Questo esempio consente di fare uno scroll con il scroll della finestra.

$(window).scroll(function(){    
     $("div").css("margin-top", $(window).scrollTop()) 
});