คุณสามารถเลื่อนแนวนอนหน้าสาธิตของฉันโดยการกดSpace Bar, Page Up / Page DownและLeft Arrow / Right Arrowปุ่ม คุณยังสามารถ snap scroll ด้วยเมาส์หรือแทร็กแพด
แต่งานเดียวหรืองานอื่น
มีวิธีการที่กิจกรรมแป้นพิมพ์และ CSS scroll snapping สามารถอยู่ร่วมกันได้หรือไม่? ฉันกำลังคิดถึงอะไร ความช่วยเหลือใด ๆ ที่จะได้รับการชื่นชมจริงๆเนื่องจากฉันได้รับการดิ้นรนกับปัญหานี้มานานกว่าหนึ่งสัปดาห์
ตรวจสอบตัวอย่างของฉันใน CodePen
(โปรดยกเลิกการคอมเม้นต์โค้ด CSS ที่เกี่ยวข้องเพื่อเปิดใช้งานเอฟเฟกต์การเลื่อนเพื่อดูว่าแป้นพิมพ์ลัดหยุดทำงาน)
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
}
}
}
}
หมายเหตุ: ฉันกำลังใช้โมดูลขนาดเล็กและสง่างามที่เรียกว่าAnimate Plusเพื่อให้ได้ภาพเคลื่อนไหวการเลื่อนที่ราบรื่น
อัปเดต: โซลูชันของ @ Kostja ทำงานใน Chrome แต่ไม่ใช่ใน Safari สำหรับ Mac หรือ iOS และเป็นสิ่งสำคัญสำหรับฉันที่จะทำงานใน Safari