Conflit lors de l'utilisation simultanée d'événements de clavier pour le défilement et l'accrochage au défilement CSS

11

Vous pouvez faire défiler horizontalement ma page de démonstration en appuyant sur les touches Space Bar, Page Up / Page Downet Left Arrow / Right Arrow. Vous pouvez également enclencher le défilement avec une souris ou un trackpad.

Mais seulement l'un ou l'autre fonctionne.

Existe-t-il un moyen de faire coexister les événements de clavier et l'alignement de défilement CSS? Qu'est-ce que je rate? Toute aide serait vraiment appréciée, car je lutte avec ce problème depuis plus d'une semaine.


Découvrez ma démo sur CodePen

(Veuillez décommenter la partie pertinente du code CSS pour activer l'effet de capture de défilement afin de voir que les raccourcis clavier cessent de fonctionner.)



Remarque: J'utilise un petit module élégant appelé Animate Plus pour réaliser l'animation de défilement fluide.


Mise à jour: La solution de @ Kostja fonctionne dans Chrome, mais pas dans Safari pour Mac ou iOS, et il est crucial pour moi qu'elle fonctionne dans Safari.

Tsar
la source

Réponses:

3

Je suppose qu'il n'y en a pas, le CSS écrase le javascript. Mais vous pouvez simplement ajouter un écouteur d'événements de roue comme:

window.addEventListener("wheel", function() {
    if(event.deltaY > 0){
      animate({
        easing: "out-quintic",
        change: animateScroll(1)
      })      
    }
      if(event.deltaY < 0){
      animate({
        easing: "out-quintic",
        change: animateScroll(-1)
      })      
    }      
});

https://codepen.io/kostjaaa/pen/NWWVBKd

kostja
la source
Pourriez-vous s'il vous plaît poster un lien vers un fork sur CodePen, car je ne peux pas faire fonctionner votre solution? Merci.
Tzar
Désolé, mais ça ne marche pas. L'as tu essayé?
Tzar
oui, je l'ai essayé avec Chrome Version 78.0.3904.108 (64Bit)
kostja
Qu'est-ce qui ne fonctionne pas de votre côté? le claquement ou le défilement du tout? vous devez cliquer dans la vue avant d'utiliser le clavier btw. Le clavier n'est pas combiné avec le survol comme le défilement.
kostja
Je viens de le tester dans Chrome, et ça marche! Mais cela ne fonctionne pas dans Safari pour Mac ou iOS, ce qui est beaucoup plus important pour moi pour ce projet. Savez-vous quelle pourrait être la raison?
Tzar
0
window.onload = () => {
  window.addEventListener("wheel", () => {
    const direction = event.deltaY > 0 ? 1 : event.deltaY < 0 ? -1 : false;

    if (direction) {
      animate({
        easing: "out-quintic",
        change: animateScroll(direction)
      });
    }
  });

  document.body.onkeydown = event => {
    switch (event.key) {
      case " ": // Space Bar
      case "PageDown":
      case "ArrowRight": {
        animate({
          easing: "out-quintic",
          change: animateScroll(1)
        });
        break;
      }
      case "PageUp":
      case "ArrowLeft": {
        animate({
          easing: "out-quintic",
          change: animateScroll(-1)
        });
        break;
      }
    }
  };
};    

Cela devrait fonctionner.

https://codepen.io/JZ6/pen/XWWQqRK

Jay Z
la source