আপনি অনুভূমিকভাবে টিপে আমার ডেমো পৃষ্ঠা স্ক্রোল করতে পারবেন Space Bar, Page Up / Page Downএবং Left Arrow / Right Arrowকি। আপনি একটি মাউস বা ট্র্যাকপ্যাড দিয়ে স্ক্রোল স্ন্যাপ করতে পারেন।
তবে কেবল একটি বা অন্যটি কাজ করে।
কিবোর্ড ইভেন্ট এবং সিএসএস স্ক্রোল স্ন্যাপিং সহাবস্থান করতে পারে এমন কোন উপায় আছে? আমি কী মিস করছি? যে কোনও সহায়তা সত্যিই প্রশংসিত হবে, যেহেতু আমি এক সপ্তাহ ধরে এই সমস্যাটির সাথে লড়াই করছি।
কোডপেনে আমার ডেমোটি দেখুন
(কীবোর্ড শর্টকাটগুলি কাজ বন্ধ হয়ে যায় তা দেখতে দয়া করে স্ক্রোল স্নেপিং এফেক্টটি সক্ষম করতে দয়া করে সিএসএস কোডের প্রাসঙ্গিক টুকরোটি অস্বীকার করুন))
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
}
}
}
}
দ্রষ্টব্য: আমি মসৃণ স্ক্রোলিং অ্যানিমেশন অর্জনের জন্য অ্যানিমেট প্লাস নামে একটি ছোট এবং মার্জিত মডিউল ব্যবহার করছি ।
আপডেট: @ কোস্তজার সমাধান ক্রোমে কাজ করে তবে ম্যাক বা আইওএসের সাফারিতে নয় এবং এটি সাফারিতে কাজ করে আমার পক্ষে এটি অত্যন্ত গুরুত্বপূর্ণ।