按空格键按整页水平滚动

Question

所有主流浏览器都允许通过按键盘上的空格键进行垂直页面滚动。 但是，如果页面完全水平，则此快捷方式不起作用。 此外，按Home和End键对于转到页面的开头和结尾不起作用。

如何使用普通的JavaScript （ ECMAScript 6 ）重新制作此功能以进行水平滚动？

按空格键应水平滚动100vw 。 理想情况下，滚动应该具有behavior: "smooth"效果。

这是我的HTML和CSS代码：

 * { 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

在容器上使用scrollTo() ，在您的情况下document.documentElement ，可以非常令人信服地克隆标准的垂直空格键滚动行为。

如果您在与示例不同的整页上实现此操作，则应注意将container更改为正确的元素，并在滚动捕捉部分不等于100vw window.innerWidth

 // Set wrapAround to true to go back to 1 after 3 let scrollAmount = 0, wrapAround = true; const container = document.documentElement; window.onload = () => { document.body.onkeyup = (event) => { switch (event.code) { case 'Space': { scrollAmount += window.innerWidth if (wrapAround && scrollAmount >= container.scrollWidth) { scrollAmount = window.innerWidth * -1; } break; } case 'End': { scrollAmount = container.scrollWidth; break; } case 'Home': { scrollAmount = 0; break; } case 'PageDown': { scrollAmount += window.innerWidth if (wrapAround && scrollAmount >= container.scrollWidth) { scrollAmount = window.innerWidth * -1; } break; } case 'PageUp': { scrollAmount -= window.innerWidth if (wrapAround && scrollAmount < 0) { scrollAmount = container.scrollWidth; } break; } } container.scrollTo({ top: 0, left: scrollAmount, behavior: 'smooth' }); } } // Reset the scrollAmount if the user scrolls back manually // If we wouldn't do this it would jump from 1 to 3 if the // user scrolls back from 3 to 1 and presses space 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 2

您也可以使用锚点进行水平滚动...这里的小例子（在空格键上滚动）

 var page = 1; document.body.onkeyup = function(e){ if(e.keyCode == 32){ page ++; location.hash = "#box-" + page; } }

 ul { list-style: none; padding: 0; margin: 0; background: #efefef; font-size: 0; text-align: center; } li { display: inline-block; padding: 0; margin: 0; font-size: 16px; line-height: 20px; } li > a { padding: 10px; } #content { white-space: nowrap; font-size: 0; text-align: center; width: 100%; overflow-x: scroll; overflow-y: hidden; height: 250px; /*this is indicative*/ } #content > div { display: inline-block; width: 100%; font-size: 16px; height: 100%; max-height: 100%; padding-top: 20px; } #content > div > p { width: 300px; padding: 10px 0; background: #ccc; margin: 0 auto; }

 <ul> <li> <a href="#box-1">link 1</a> </li> <li> <a href="#box-2">link 2</a> </li> <li> <a href="#box-3">link 3</a> </li> <li> <a href="#box-4">link 4</a> </li> <li> <a href="#box-5">link 5</a> </li> <li> <a href="#box-6">link 6</a> </li> <li> <a href="#box-7">link 7</a> </li> <li> <a href="#box-8">link 8</a> </li> <li> <a href="#box-9">link 9</a> </li> <li> <a href="#box-10">link 10</a> </li> </ul> <div id="content"> <div id="box-1"> <p>Some text 1</p> </div> <div id="box-2"> <p>Some text 2</p> </div> <div id="box-3"> <p>Some text 3</p> </div> <div id="box-4"> <p>Some text 4</p> </div> <div id="box-5"> <p>Some text 5</p> </div> <div id="box-6"> <p>Some text 6</p> </div> <div id="box-7"> <p>Some text 7</p> </div> <div id="box-8"> <p>Some text 8</p> </div> <div id="box-9"> <p>Some text 9</p> </div> <div id="box-10"> <p>Some text 10</p> </div> </div>

https://jsfiddle.net/5up46L9v/5/ =>（更高的片段效果更好）

香草 js 中的平滑 scrool 对我来说没什么难的......使用像 Jquery 这样的库......