Conflitto quando si utilizzano contemporaneamente eventi da tastiera per lo scorrimento e lo snap a scorrimento CSS


11

È possibile scorrere orizzontalmente la mia pagina demo premendo Space Bar, Page Up / Page Downe Left Arrow / Right Arrowchiavi. Puoi anche scattare con il mouse o il trackpad.

Ma funziona solo l'uno o l'altro.

Esiste un modo in cui gli eventi della tastiera e lo snap a scorrimento CSS possono coesistere? Cosa mi sto perdendo? Qualsiasi aiuto sarebbe molto apprezzato, dal momento che ho lottato con questo problema per oltre una settimana.


Guarda la mia demo su CodePen

(Rimuovere il frammento del codice CSS pertinente per abilitare l'effetto di scorrimento per vedere che le scorciatoie da tastiera smettono di funzionare.)



Nota: sto usando un piccolo ed elegante modulo chiamato Animate Plus per ottenere l'animazione a scorrimento uniforme.


Aggiornamento: la soluzione di @ Kostja funziona in Chrome, ma non in Safari per Mac o iOS, ed è fondamentale per me che funzioni in Safari.

Risposte:


3

Immagino di no, il CSS sovrascrive il javascript. Ma puoi semplicemente aggiungere un listener di eventi come:

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


Potresti pubblicare un link a un fork su CodePen, perché non riesco a far funzionare la tua soluzione? Grazie.
Tzar,

Siamo spiacenti, ma non funziona. L'hai provato?
Tzar,

si l'ho provato con la versione 78.0.3904.108 di Chrome (64 bit)
kostja

Cosa non funziona dalla tua parte? lo scatto o lo scorrimento a tutti? devi fare clic nella vista prima di usare la tastiera btw. La tastiera non è combinata con il passaggio del mouse come lo scorrimento.
kostja,

L'ho appena testato su Chrome e funziona! Ma non funziona in Safari per Mac o iOS, il che è molto più importante per me per questo progetto. Sai quale potrebbe essere la ragione?
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;
      }
    }
  };
};    

Questo dovrebbe funzionare.

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

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.