web-dev-qa-db-fra.com

requête multimédia pour le défilement vertical

Existe-t-il un moyen de détecter la distance de défilement vertical avec une requête multimédia?

Il semble que les requêtes multimédias soient conçues autour de la détection du média (choquant à droite: P), de sorte que des éléments tels que la hauteur du navigateur puissent être testés, mais pas précisément le défilement de la page.

Si ce n'est pas possible, mais vous connaissez un moyen JS (pas jQuery) n'hésitez pas à poster!

csscss3media-queries
21
Don P

Je ne crois pas que ce soit possible avec une requête multimédia CSS, mais je sais que la hauteur de défilement peut être trouvée dans JavaScript avec window.pageYOffset. Si vous souhaitez exécuter cette valeur via une fonction à chaque fois que les utilisateurs font défiler une page, vous pouvez effectuer les opérations suivantes:

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

Ou juste:

window.onscroll = scrollFunctionHere;

Si la fonction elle-même a coché la valeur de window.pageYOffset.

Pour plus de conseils sur l'utilisation de window.onscroll efficacement en JavaScript, reportez-vous à la réponse de mynameistechno .

Remarque importante sur l'efficacité : l'exécution d'une fonction à chaque fois qu'un événement de défilement est émis peut interrompre les cycles de la CPU si des opérations non triviales sont effectuées dans le rappel. Au lieu de cela, il est recommandé d'autoriser uniquement un rappel à s'exécuter autant de fois par seconde. Cela a été appelé "debouncing".

Code simple de gestionnaire d'événement de défilement défendu ci-dessous. Remarquez comment le texte bascule entre "BONJOUR" et "MONDE" toutes les 250 ms, plutôt que chaque image:

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>

9
user1846065

Tout d'abord, la réponse acceptée ne fonctionne pas. 

Le nom correct est 

window.onscroll

et pas

window.onScroll

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

Deuxièmement, cela est horriblement inefficace, car la fonction est appelée beaucoup plus que nécessaire et peut rendre la page décalée lors du défilement. De John Resig:

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

Il est préférable d’utiliser une minuterie qui s’exécute toutes les 150 ms environ: quelque chose comme:

var scrolled = false;

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

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

Dans Jquery vous avez la méthode .scrollTop ()

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

Cet exemple fait un div scroll avec le scroll de la fenêtre.

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