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.)
import animate from "https://cdn.jsdelivr.net/npm/animateplus@2/animateplus.js"
const sections = Array.from(document.querySelectorAll("section")).sort(
(s1, s2) => {
return s1.getBoundingClientRect().left - s2.getBoundingClientRect().left
}
)
const getSectionInView = () => {
const halfWidth = window.innerWidth / 2
const index = sections.findIndex(
section =>
section.getBoundingClientRect().left <= halfWidth &&
section.getBoundingClientRect().right > halfWidth
)
return index
}
const getNextSection = dir => {
const sectionInViewIndex = getSectionInView()
const nextIndex = sectionInViewIndex + dir
const numSections = sections.length
const nextSectionIndex =
nextIndex < 0 || nextIndex >= numSections ? sectionInViewIndex : nextIndex
return sections[nextSectionIndex]
}
const container = document.scrollingElement
const animateScroll = dir => {
const from = container.scrollLeft
const { left } = getNextSection(dir).getBoundingClientRect()
return progress => (container.scrollLeft = from + progress * left)
}
window.onload = () => {
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
}
}
}
}
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.
Ini seharusnya bekerja.
https://codepen.io/JZ6/pen/XWWQqRK
sumber