Détecter le sens du scroll

Un code d'exemple ne fonctionne pas comme attendu chez moi

Le problème exposé dans ce sujet a été résolu.

Bonjour à tous !

J'ai fait des heures sup' hier soir pour un problème qui m'échappe partiellement.

Histoire de changer un peu, on souhaitait faire une page dont les sections se suivraient sous forme de diaporama avec des transitions du type "la diapositive suivante masque celle d'avant en arrivant par le bas, la diapositive précédente est affichée par masquage de la courante vers le bas" (désolé, je ne vois pas trop comment expliquer). Et parce que sur chaque diapositive on a des animations particulières et qu'on n'a pas trouvé de script qui permette à la fois de gérer le scroll, les touches, les écrans tactiles et des clics sur les éléments précis, plus encore des fonctions de rappel différentes pour chaque diapositive, on tente de réinventer la roue.

Le souci est que sous Webkit, impossible de déterminer la direction du scroll, l'événement retourne true au lieu d'un nombre. C'est comme si, du fait de la manière de gérer les slides avec le CSS, webkit considérait qu'il n'y avait pas de déplacement, et du coup, que je fasse défiler dans un sens ou dans l'autre, c'est toujours la même direction…

En CSS, toutes les diapositives n'ont aucune hauteur, sauf celle courante qui est définie à 100vh (responsive oblige, dixit notre intégrateur) — et pour ne pas faire simple, la dernière doit avoir un défilement "normal" pour permettre de tout y faire tenir.

Je ne sais pas trop si j'attends les événements sur le mauvais élément (j'ai essayé d'écouter sur document ainsi que sur 'body') ou si ces histoires de hauteur posent problème.

Voici la base de travail.

1
2
3
4
5
6
7
8
9
<body>
    <div id="GeneralWrapper">
        <div id="slide0">
        </div>
        <div id="slide1" class="hide-me">
        </div>
        <!-- … -->
    </div>
</body>

Les div[id^=slide] sont en hauteur 100vh, et la classe hide-me force la hauteur à 0.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
$(document).on('DOMMouseScroll mousewheel', function(e) {
  // cross-browser wheel delta
  var e = e.originalEvent;
  if (!scrolling) {
      scrolling = true;
      var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
      if (delta > 0) {
          previousSlide();
      } else {
          nextSlide();
      }
  }
});

Est-ce que quelqu'un a déjà eu un souci similaire ? Merci d'avance  :)

+0 -0

Salut Ymox,

Je ne suis pas sûr de tout comprendre ni même de réussir à t'aider, mais tu trouveras ci-dessous deux morceaux de codes intéressants :

Avec jQuery : 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
var lastScrollTop = 0;
$(window).scroll(function(event){
   var st = $(this).scrollTop();
   if (st > lastScrollTop){
       // downscroll code
   } else {
      // upscroll code
   }
   lastScrollTop = st;
});

Source

Avec JavaScript : 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
var lastScrollTop = 0;
element.addEventListener("scroll", function(){ // or window.addEventListener("scroll"....
   var st = window.pageYOffset || document.documentElement.scrollTop;
   if (st > lastScrollTop){
       // downscroll code
   } else {
      // upscroll code
   }
   lastScrollTop = st;
}, false);

Source

Excellente journée.

+0 -0

Le souci en fait, c'était que les deux méthodes ne capturaient rien avec Webkit, parce que pour ce moteur de rendu, il n'y avait pas de défilement à proprement parler, il n'y avait qu'une activation de la molette sans réel mouvement.

Et tout ça parce qu'il y avait des positions relatives et absolues qui se baladaient…  >_<

Bref, le script très procédural qui avait été mis en place à l'arrache a été revu, on a enfin trouvé une manière générique de gérer ça, et du coup, ça fonctionne mieux.

+1 -0
Connectez-vous pour pouvoir poster un message.
Connexion

Pas encore membre ?

Créez un compte en une minute pour profiter pleinement de toutes les fonctionnalités de Zeste de Savoir. Ici, tout est gratuit et sans publicité.
Créer un compte