Conflicto al usar simultáneamente eventos de teclado para desplazamiento y ajuste de desplazamiento CSS

11

Puede desplazarse horizontalmente mi página de demostración presionando Space Bar, Page Up / Page Downy Left Arrow / Right Arrowllaves. También puede ajustar el desplazamiento con un mouse o un panel táctil.

Pero solo uno u otro funciona.

¿Hay alguna manera de que los eventos de teclado y el ajuste de desplazamiento CSS puedan coexistir? ¿Qué me estoy perdiendo? Cualquier ayuda sería muy apreciada, ya que he estado luchando con este problema durante más de una semana.


Mira mi demo en CodePen

(Descomente la parte relevante del código CSS para habilitar el efecto de desplazamiento de desplazamiento para ver que los atajos de teclado dejan de funcionar).



Nota: Estoy usando un módulo pequeño y elegante llamado Animate Plus para lograr la animación de desplazamiento suave.


Actualización: la solución de @ Kostja funciona en Chrome, pero no en Safari para Mac o iOS, y para mí es crucial que funcione en Safari.

Zar
fuente

Respuestas:

3

Supongo que no, el CSS sobrescribe el javascript. Pero simplemente puede agregar el detector de eventos de rueda como:

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
fuente
¿Podría publicar un enlace a una bifurcación en CodePen, porque no puedo hacer que su solución funcione? Gracias.
Tzar
Lo siento, pero no funciona. ¿Lo has probado?
Tzar
Sí, lo he probado con Chrome versión 78.0.3904.108 (64 bits)
kostja
¿Qué no funciona de tu lado? el chasquido o el desplazamiento en absoluto? tienes que hacer clic en la vista antes de usar el teclado por cierto. El teclado no se combina con el desplazamiento al igual que el desplazamiento.
kostja
¡Lo acabo de probar en Chrome y funciona! Pero no funciona en Safari para Mac o iOS, lo cual es mucho más importante para mí para este proyecto. ¿Sabes cuál podría ser la razón?
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;
      }
    }
  };
};    

Esto debería funcionar.

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

Jay Z
fuente