按键时水平滚动整页

Question

我有一个完全水平展开的页面，可以通过按例如Space Bar 、 Page Down 、 Right Arrow 、 Home 、 End等滚动来导航。

我目前有两个想解决的问题：

1. 当按下右箭头或左箭头键时，页面移动略大于 100vw，但其目标是使页面边缘与 window 完美对齐。

2. 例如，如果您在到达页面末尾时多次按下Page Down键，那么您将需要相同次数的Page Up按下才能向后滚动。

我将非常感谢解决此问题的任何帮助。

这是我的代码：

 let scrollAmount = 0 const container = document.documentElement window.onload = () => { document.body.onkeyup = event => { switch (event.code) { case "Space": case "PageDown": case "ArrowRight": { scrollAmount += window.innerWidth break } case "PageUp": case "ArrowLeft": { scrollAmount -= window.innerWidth break } case "Home": case "ArrowUp": { scrollAmount = 0 break } case "End": case "ArrowDown": { scrollAmount = container.scrollWidth break } } container.scrollTo({ top: 0, left: scrollAmount, behavior: "smooth" }) } } // Reset the scrollAmount if the user scrolls back manually. window.onscroll = event => { scrollAmount = container.scrollLeft }

 * { margin: 0; padding: 0 } html { height: 100% } html, body, section { display: flex; flex-grow: 1 } body { scroll-snap-type: x mandatory; scroll-snap-points-x: repeat(100%); overflow-x: auto } section { display: grid; place-items: center; flex: 1 0 100%; scroll-snap-align: center } section:nth-of-type(1) { background: orange } section:nth-of-type(2) { background: limeGreen } section:nth-of-type(3) { background: royalBlue } h2 { color: white }

 <section><h2>1</h2></section> <section><h2>2</h2></section> <section><h2>3</h2></section>

Answer 1

添加event.preventDefault()并将侦听器更改为keydown而不是keyup将阻止箭头键的默认连续滚动。 这是有效的，因为箭头键滚动是在按住时触发的（我们现在已经阻止了），而事件侦听器仅在抬起箭头键时才被触发。

您可以对Home和End执行相同操作（即添加event.preventDefault() ）以防止所有水平滚动。

 let scrollAmount = 0 const container = document.documentElement window.onload = () => { document.body.onkeydown = event => { // <----------- switch (event.code) { case "Space": case "PageDown": case "ArrowRight": { event.preventDefault(); // <----------- scrollAmount += window.innerWidth break } case "PageUp": case "ArrowLeft": { event.preventDefault(); // <----------- scrollAmount -= window.innerWidth break } case "Home": case "ArrowUp": { scrollAmount = 0 break } case "End": case "ArrowDown": { scrollAmount = container.scrollWidth break } } container.scrollTo({ top: 0, left: scrollAmount, }) } } // Reset the scrollAmount if the user scrolls back manually. window.onscroll = event => { scrollAmount = container.scrollLeft }

 * { margin: 0; padding: 0 } html { height: 100% } html, body, section { display: flex; flex-grow: 1 } body { scroll-snap-type: x mandatory; scroll-snap-points-x: repeat(100%); overflow-x: auto } section { display: grid; place-items: center; flex: 1 0 100%; scroll-snap-align: center } section:nth-of-type(1) { background: orange } section:nth-of-type(2) { background: limeGreen } section:nth-of-type(3) { background: royalBlue } h2 { color: white }

 <section><h2>1</h2></section> <section><h2>2</h2></section> <section><h2>3</h2></section>