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ć.)
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
}
}
}
}
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.
To powinno działać.
https://codepen.io/JZ6/pen/XWWQqRK
źródło