Détecter la direction du scroll

Ce code permet de détecter la direction du scroll d’une page ainsi que la hauteur du scroll (le scrolltop).
Attention, ce script utilise jquery. Ne pas oublier de charger la librairie.

Précédent | 10/10

Ceci permet d’activer des événements différents en cas de scroll vers le haut ou vers le bas.
Le code est commenté pour permettre de s’y retrouver. Quelques astuces sont en effet utiliser pour rendre le script le plus léger et compatible possible.

<!DOCTYPE html>
<html lang="fr">
   <head>
       <meta charset="utf-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <title>scroll top et bottom</title>
       <link rel="stylesheet" href="style.css">
       <script src="jquery-1.9.0.min.js"></script>
       <style>
           #test{
               padding: 5px 7px;
               background: #e9e9e9;
               position: fixed;
               bottom: 15px;
               left: 15px;
           }
           .bloc {
               height:400px;
               background-color:#eee;
           }
           .bloc.rouge { background-color:red; }
           .bloc.bleu { background-color:blue; }
       </style>
   </head>
   <body>
       <p id="test"></p>
       <div class="bloc"></div>
       <div class="bloc rouge"></div>
       <div class="bloc bleu"></div>
   </body>
   <script>
       
       //attach the "wheel" event if it is supported, otherwise "mousewheel" event is used
       $("html").on(("onwheel" in document.createElement("div") ? "wheel" : "mousewheel"), function (e) {
           var evt = e.originalEvent || e;
           //this is what really matters
           var deltaY = evt.deltaY || (-1 / 40 * evt.wheelDelta), //wheel || mousewheel
               scrollTop = $(this).scrollTop() || $("body").scrollTop(); //fix safari
           if (deltaY > 0) {
               $("#test").html(scrollTop + " : <b>scroll down</b>");
           } else {
               $("#test").html(scrollTop + " : <b>scroll up</b>");
           }

       });
   </script>
</html>