Medienabfrage für vertikales Scrollen

Question

Gibt es eine Möglichkeit, vertikale Scrolldistanz bei einer Medienabfrage zu erkennen?

Es scheint, dass Medienabfragen rund um die Erkennung des Mediums (schockierend rechts: P) so Dinge wie Browserhöhe testbar sind, aber nicht speziell, wie weit die Seite gescrollt ist.

Wenn nicht möglich ist, aber Sie wissen einen Weg in JS (nicht jQuery) fühlen sich frei zu posten!

Answer 1

Ich glaube nicht, dass es mit einer CSS-Medienabfrage möglich ist, aber ich weiß, dass die Scroll-Höhe in JavaScript mit window.pageYOffset gefunden werden kann. Wenn Sie diesen Wert durch eine Funktion jedes Mal der Benutzer gescrollt nach oben oder unten auf einer Seite ausführen möchten, können Sie so etwas wie

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

Oder einfach tun:

window.onscroll = scrollFunctionHere; 

Wenn die Funktion selbst die aufgegebenen Wert von window.pageYOffset.

Weitere Hinweise zur effizienten Verwendung von window.onscroll in JavaScript finden Sie unter mynameistechno's answer.

Wichtiger Hinweis zur Effizienz: Das Ausführen einer Funktion jedes Mal, wenn ein Scroll-Ereignis ausgegeben wird, kann CPU-Zyklen durchbrechen, wenn im Callback nicht-triviale Vorgänge ausgeführt werden. Stattdessen sollten Sie zulassen, dass ein Rückruf nur so oft pro Sekunde ausgeführt wird. Dies wurde als "Entprellen" bezeichnet.

Einfach entprellt Scroll Event Handler-Code unten. Beachten Sie, wie der Text wechselt zwischen „HALLO“ und „Welt“ alle 250ms, anstatt jeden einzelnen Rahmen:

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

Zunächst einmal, die akzeptierte Antwort nicht funktioniert.

Der richtige Name

window.onscroll 

und nicht

window.onScroll 

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

Zweitens ist, dann ist dies schrecklich ineffizient, da die Funktion Art und Weise mehr genannt wird, als es braucht, und das machen kann Seite laggy beim Scrollen. Von John Resig:

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

Viel besser einen Timer zu verwenden, die alle 150 ms oder so läuft - so etwas wie:

var scrolled = false; 

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

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

Answer 3

In Jquery haben Sie die Methode .scrollTop()

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

In diesem Beispiel wird ein Div-Scroll mit dem Fenster Scroll durchgeführt.

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