เกิดข้อขัดแย้งเมื่อใช้เหตุการณ์แป้นพิมพ์พร้อมกันสำหรับการเลื่อนและการเลื่อนการเลื่อน CSS


11

คุณสามารถเลื่อนแนวนอนหน้าสาธิตของฉันโดยการกดSpace Bar, Page Up / Page DownและLeft Arrow / Right Arrowปุ่ม คุณยังสามารถ snap scroll ด้วยเมาส์หรือแทร็กแพด

แต่งานเดียวหรืองานอื่น

มีวิธีการที่กิจกรรมแป้นพิมพ์และ CSS scroll snapping สามารถอยู่ร่วมกันได้หรือไม่? ฉันกำลังคิดถึงอะไร ความช่วยเหลือใด ๆ ที่จะได้รับการชื่นชมจริงๆเนื่องจากฉันได้รับการดิ้นรนกับปัญหานี้มานานกว่าหนึ่งสัปดาห์


ตรวจสอบตัวอย่างของฉันใน CodePen

(โปรดยกเลิกการคอมเม้นต์โค้ด CSS ที่เกี่ยวข้องเพื่อเปิดใช้งานเอฟเฟกต์การเลื่อนเพื่อดูว่าแป้นพิมพ์ลัดหยุดทำงาน)



หมายเหตุ: ฉันกำลังใช้โมดูลขนาดเล็กและสง่างามที่เรียกว่าAnimate Plusเพื่อให้ได้ภาพเคลื่อนไหวการเลื่อนที่ราบรื่น


อัปเดต: โซลูชันของ @ Kostja ทำงานใน Chrome แต่ไม่ใช่ใน Safari สำหรับ Mac หรือ iOS และเป็นสิ่งสำคัญสำหรับฉันที่จะทำงานใน Safari

คำตอบ:


3

ฉันเดาว่าไม่มี css เขียนทับจาวาสคริปต์ แต่คุณสามารถเพิ่ม Eventlistener wheel ได้เช่น:

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


คุณช่วยกรุณาโพสต์ลิงค์ไปยังทางแยกใน CodePen ได้หรือไม่เพราะฉันไม่สามารถแก้ปัญหาของคุณได้? ขอบคุณ
Tzar

ขออภัย แต่มันใช้งานไม่ได้ คุณเคยลองไหม
Tzar

ใช่ได้ทดลองใช้กับ Chrome เวอร์ชัน 78.0.3904.108 (64Bit)
kostja

คุณไม่ทำงานอะไรข้างคุณ snap หรือ scroll เลย? คุณต้องคลิกในมุมมองก่อนใช้แป้นพิมพ์ btw แป้นพิมพ์ไม่ได้รวมกับโฮเวอร์เหมือนกับการเลื่อน
kostja

ฉันเพิ่งทดสอบใน Chrome และใช้งานได้! แต่มันไม่ทำงานใน Safari สำหรับ Mac หรือ iOS ซึ่งเป็นสิ่งสำคัญสำหรับฉันสำหรับโครงการนี้ คุณรู้หรือไม่ว่าสาเหตุอาจเป็นเพราะอะไร?
Tzar

0
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

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.