按空格键按整页水平滚动

Question

All major browsers allow vertical page scrolling by pressing the Space Bar on the keyboard. However, this shortcut doesn't work if the page is entirely horizontal. Also, pressing the Home and End keys doesn't work for going to beginning and end of page.

How can I remake this feature for horizontal scrolling with plain vanilla JavaScript ( ECMAScript 6 )?

Pressing the Space Bar should scroll horizontally by 100vw . The scrolling should ideally be animated with behavior: "smooth" effect.

Here is my HTML and CSS code:

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

Using scrollTo() on a container, in your case document.documentElement , makes for a pretty convincing clone of the standard vertical Space Bar scrolling behaviour.

If you implement this on a full page that differs from your example, you should take care to change container to the proper element and change window.innerWidth if the scroll snap sections are not equal to 100vw .

 // 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

you can use anchor for horizontal scrolling too... Little exemple here ( scroll on Space Bar )

 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/ => ( better result with a highter snippet )

Smooth scrool in vanilla js is little hard for nothing for me... Use a lib like Jquery...