Javascript 按此键可水平滚动整页

我有一个完全水平展开的页面，可以通过按空格键、向下翻页、向右箭头、主页、结束等滚动来导航

我目前有两个问题需要解决：

按向右箭头键或向左箭头键时，页面移动略微超过100vw，但其目标是使页面边缘与窗口完全对齐

例如，如果在到达页面末尾时多次按下Page Down（向下翻页）键，则向后滚动所需的向上翻页次数相同

如果有人能帮我解决这个问题，我将不胜感激

这是我的密码：

让scrollAmount=0
const container=document.documentElement
window.onload=（）=>{
document.body.onkeyup=事件=>{
开关（事件代码）{
案例“空间”：
案例“PageDown”：
案例“ArrowRight”：{
scrollAmount+=window.innerWidth
打破
}
案例“PageUp”：
案例“箭头左”：{
scrollAmount-=window.innerWidth
打破
}
案例“家”：
案例“ArrowUp”：{
滚动量=0
打破
}
案例“结束”：
案例“箭头向下”：{
scrollAmount=container.scrollWidth
打破
}
}
container.scrollTo({
排名：0，
左：滚动量，
行为：“平稳”
})
}
}
//如果用户手动向后滚动，则重置滚动量。
window.onscroll=事件=>{
scrollAmount=container.scrollLeft
}

*{
保证金：0；
填充：0
}
html{高度：100%}
html、正文、节{
显示器：flex；
弹性增长：1
}
身体{
滚动捕捉类型：x必填；
滚动捕捉点x：重复（100%）；
溢出-x：自动
}
部分{
显示：网格；
放置项目：中心；
弹性：10100%；
滚动捕捉对齐：居中
}
第n节类型（1）{背景：橙色}
第n节（2）{背景：limeGreen}
第n节类型（3）{背景：皇家蓝}
h2{颜色：白色}

1
2.
3

添加

event.preventDefault（）

并将侦听器更改为

keydown

而不是

keydup

将阻止箭头键的默认连续滚动。这是因为箭头键滚动是在按下时触发的（我们现在阻止了它），而事件侦听器只有在箭头键被提起时才被触发

您可以对Home和End执行相同的操作（即添加

event.preventDefault（）

），以防止所有水平滚动

让scrollAmount=0
const container=document.documentElement
window.onload=（）=>{
document.body.onkeydown=事件=>{//