Konflik saat bersamaan menggunakan acara keyboard untuk menggulir dan menjentikkan gulir CSS

11

Anda dapat menggulir halaman demo saya secara horizontal dengan menekan Space Bar, Page Up / Page Downdan Left Arrow / Right Arrowtombol. Anda juga dapat menjentik gulir dengan mouse atau trackpad.

Tetapi hanya satu atau yang lainnya yang berfungsi.

Apakah ada cara agar acara keyboard dan gertakan CSS dapat hidup berdampingan? Apa yang saya lewatkan? Bantuan apa pun akan sangat dihargai, karena saya telah berjuang dengan masalah ini selama lebih dari seminggu.


Lihat demo saya di CodePen

(Harap batalkan komentar pada bagian kode CSS yang relevan untuk mengaktifkan efek gertakan gulir untuk melihat bahwa pintasan keyboard berhenti berfungsi.)



Catatan: Saya menggunakan modul kecil dan elegan yang disebut Animate Plus untuk mencapai animasi scrolling yang lancar.


Pembaruan: Solusi @ Kostja bekerja di Chrome, tetapi tidak di Safari untuk Mac atau iOS, dan penting bagi saya bahwa ia bekerja di Safari.

Kaisar
sumber

Jawaban:

3

Saya kira tidak ada, css menimpa javascript. Tetapi Anda dapat menambahkan wheel listlistener seperti:

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
sumber
Bisakah Anda memposting tautan ke garpu di CodePen, karena saya tidak dapat membuat solusi Anda berfungsi? Terima kasih.
Tzar
Maaf, tetapi tidak berhasil. Sudahkah Anda mencobanya?
Tzar
ya sudah mencobanya dengan Chrome Versi 78.0.3904.108 (64Bit)
kostja
Apa yang tidak bekerja di pihak Anda? jepret atau gulir sama sekali? Anda harus mengklik pada tampilan sebelum menggunakan keyboard btw. Keyboard tidak dikombinasikan dengan hover seperti gulir.
kostja
Saya baru saja mengujinya di Chrome, dan itu berhasil! Tapi itu tidak berfungsi di Safari untuk Mac atau iOS, yang jauh lebih penting bagi saya untuk proyek ini. Apakah Anda tahu apa alasannya?
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;
      }
    }
  };
};    

Ini seharusnya bekerja.

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

Jay Z
sumber