Javascript 同时使用键盘事件进行滚动和CSS滚动捕捉时发生冲突

您可以通过按空格键、page Up/page Down和Left Arrow/Right Arrow键水平滚动我的演示页面。您也可以使用鼠标或触摸板捕捉滚动

但只有其中一种有效

键盘事件和CSS滚动捕捉是否可以共存？我错过了什么？任何帮助都将非常感谢，因为我已经为这个问题挣扎了一个多星期

---

（请取消对相关CSS代码的注释以启用滚动捕捉效果，以便看到键盘快捷键停止工作。）

---

从导入动画”https://cdn.jsdelivr.net/npm/animateplus@2/animateplus.js“
const sections=Array.from（document.queryselectoral（“section”））.sort(
（s1，s2）=>{
返回s1.getBoundingClientRect（）.left-s2.getBoundingClientRect（）.left
}
)
常量getSectionInView=（）=>{
const halfWidth=window.innerWidth/2
常量索引=sections.findIndex(
节=>
section.getBoundingClientRect（）.左半宽度
)
回报指数
}
const getNextSection=dir=>{
const sectionInViewIndex=getSectionInView（）
常量nextIndex=区段INVIEWINDEX+dir
const numSections=sections.length
常量nextSectionIndex=
nextIndex<0 | | nextIndex>=numSections？节索引：nextIndex
返回节[nextSectionIndex]
}
const container=document.scrollingElement
常量animateScroll=dir=>{
const from=container.scrollLeft
const{left}=getNextSection（dir）.getBoundingClientRect（）
返回进度=>（container.scrollLeft=from+progress*left）
}
window.onload=（）=>{
document.body.onkeydown=事件=>{
开关（事件键）{
大小写“”：//空格键
案例“PageDown”：
案例“ArrowRight”：{
生动活泼({
放松：“走出五重奏”，
更改：动画滚动（1）
})
打破
}
案例“PageUp”：
大小写“ArrowLeft”：{
生动活泼({
放松：“走出五重奏”，
更改：动画滚动（-1）
})
打破
}
}
}
}

我想没有，css会覆盖javascript。但您可以简单地添加轮子事件监听器，如：

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

window.addEventListener（“轮子”，函数（）{
如果（event.deltaY>0）{
生动活泼({
放松：“走出五重奏”，
更改：动画滚动（1）
})      
}
if（event.deltaY<0）{
生动活泼({
放松：“走出五重奏”，
更改：动画滚动（-1）
})      
}      
});

window.onload=（）=>{
window.addEventListener（“轮子”，（）=>{
const direction=event.deltaY>0？1:event.deltaY<0？1:false；
如果（指示）{
生动活泼({
放松：“走出五重奏”，
更改：动画滚动（方向）
});
}
});
document.body.onkeydown=事件=>{
开关（事件键）{
大小写“”：//空格键
案例“PageDown”：
案例“ArrowRight”：{
生动活泼({
放松：“走出五重奏”，
更改：动画滚动（1）
});
打破
}
案例“PageUp”：
案例“箭头左”：{
生动活泼({
放松：“走出五重奏”，
更改：动画滚动（-1）
});
打破
}
}
};
};    

这应该行得通

---

由于我无法使您的解决方案正常工作，请在CodePen上发布一个指向fork的链接，好吗？谢谢。是的，我已经用Chrome 78.0.3904.108版（64位）试用过了。您这边有什么不起作用？快照还是卷轴？顺便说一句，在使用键盘之前，你必须在视图中单击。键盘没有像滚动一样与悬停结合。我刚刚在Chrome中测试了它，它确实有效！但它在SafariforMac或iOS中不起作用，这对我来说对这个项目更重要。你知道可能是什么原因吗？我没有safari，也许你可以试试“鼠标轮”而不是“轮子”？你的问题解决了吗？？我也面临着同样的问题。。。我使用了平滑滚动使用css

html{scroll behavior:smooth；}

使用它时，我的页面上不会出现箭头键。。你能帮忙吗？这两种东西都可以用吗。或者它有什么错误？？？@Harshitmishra不幸的是，没有。它似乎不能干净地完成。哦。。。然后我可能会考虑其他方法。。。谢谢你，兄弟。

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