Konflikt podczas jednoczesnego używania zdarzeń klawiatury do przewijania i przyciągania przewijania CSS

11

Można przewijać w poziomie moją stronę demonstracyjną, naciskając Space Bar, Page Up / Page Downi Left Arrow / Right Arrowkluczy. Możesz także szybko przewijać za pomocą myszy lub gładzika.

Ale tylko jedno lub drugie działa.

Czy istnieje sposób, aby zdarzenia na klawiaturze i przyciąganie przewijania CSS mogły współistnieć? czego mi brakuje? Każda pomoc byłaby bardzo wdzięczna, ponieważ zmagam się z tym problemem od ponad tygodnia.


Sprawdź moje demo na CodePen

(Proszę odkomentować odpowiedni fragment kodu CSS, aby włączyć efekt przyciągania przewijania, aby zobaczyć, że skróty klawiaturowe przestają działać.)



Uwaga: Używam małego i eleganckiego modułu o nazwie Animate Plus do uzyskania płynnej animacji przewijania.


Aktualizacja: Rozwiązanie @ Kostja działa w Chrome, ale nie w Safari na Macu lub iOS, i dla mnie kluczowe jest, aby działało w Safari.

Car
źródło

Odpowiedzi:

3

Myślę, że nie ma, css zastępuje javascript. Ale możesz po prostu dodać detektor zdarzeń koła, taki jak:

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
źródło
Czy możesz zamieścić link do rozwidlenia na CodePen, ponieważ nie mogę sprawić, by twoje rozwiązanie zadziałało? Dzięki.
car
Przepraszam, ale to nie działa. Próbowałeś tego?
car
tak, wypróbowałem to z wersją Chrome 78.0.3904.108 (64Bit)
kostja
Co nie działa po twojej stronie? snap czy zwój w ogóle? musisz kliknąć widok przed użyciem klawiatury btw. Klawiatura nie jest połączona z najechaniem kursorem, podobnie jak przewijanie.
kostja
Właśnie przetestowałem to w Chrome i działa! Ale to nie działa w Safari na Maca lub iOS, co jest dla mnie znacznie ważniejsze w tym projekcie. Czy wiesz, co może być przyczyną?
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;
      }
    }
  };
};    

To powinno działać.

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

Jay Z
źródło