स्क्रॉल और सीएसएस स्क्रॉल तड़क के लिए एक साथ कीबोर्ड घटनाओं का उपयोग करते समय संघर्ष

Question

आप क्षैतिज रूप से मेरे डेमो पेज को दबाकर Space Bar, Page Up / Page Downऔर Left Arrow / Right Arrowकुंजियों को स्क्रॉल कर सकते हैं । आप माउस या ट्रैकपैड के साथ स्क्रॉल भी कर सकते हैं।

लेकिन केवल एक या दूसरे काम करता है।

वहाँ एक तरीका है कि कीबोर्ड घटनाओं और सीएसएस स्क्रॉल तड़क सहकर्मी कर सकते हैं? मैं क्या खो रहा हूँ? किसी भी मदद वास्तव में सराहना की जाएगी, क्योंकि मैं इस समस्या से एक सप्ताह से अधिक समय से जूझ रहा हूं।

---

CodePen पर मेरा डेमो देखें

(स्क्रॉल कोडिंग प्रभाव को सक्षम करने के लिए सीएसएस कोड के संबंधित टुकड़े को अनलोड करें ताकि कीबोर्ड शॉर्टकट काम करना बंद कर दें।)

---

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
      }
    }
  }
}

---

नोट: मैं एक छोटे और सुरुचिपूर्ण मॉड्यूल का उपयोग कर रहा हूं, जिसे सुगम स्क्रॉलिंग एनीमेशन प्राप्त करने के लिए चेतन प्लस कहा जाता है ।

---

अपडेट: @ कोस्टजा का समाधान क्रोम में काम करता है, लेकिन मैक या आईओएस के लिए सफारी में नहीं, और यह मेरे लिए महत्वपूर्ण है कि यह सफारी में काम करता है।

Answer 1

मुझे लगता है कि वहाँ नहीं है, सीएसएस जावास्क्रिप्ट को ओवरराइट करता है। लेकिन आप बस पहिया आयोजक को जोड़ सकते हैं जैसे:

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

Comments

क्या आप कृपया CodePen पर कांटे का लिंक पोस्ट कर सकते हैं, क्योंकि मैं आपके समाधान के लिए काम नहीं कर सकता? धन्यवाद।

— त्सर

क्षमा करें, लेकिन यह काम नहीं करता है। या तुमने कोशिश की?

— त्जार

हाँ, इसे Chrome संस्करण 78.0.3904.108 (64 बिट) के साथ

— आज़माया गया है

आपकी तरफ से क्या काम नहीं हो रहा है? तस्वीर या स्क्रॉल सब पर? आपको कीबोर्ड btw का उपयोग करने से पहले दृश्य में क्लिक करना होगा। स्क्रॉल के रूप में होवर के साथ कीबोर्ड संयुक्त नहीं है।

— कोस्तजा 25:19

मैंने अभी इसे Chrome में परीक्षण किया है, और यह काम करता है! लेकिन यह मैक या आईओएस के लिए सफारी में काम नहीं करता है, जो इस परियोजना के लिए मेरे लिए अधिक महत्वपूर्ण है। क्या आप जानते हैं कि इसका क्या कारण हो सकता है?

— त्सार

Answer 2

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;
      }
    }
  };
};    

यह काम करना चाहिए।

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