按 Space 栏键水平滚动整页

Question

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

如何使用普通香草 JavaScript (ECMAScript 6) 重新制作此功能以进行水平滚动？

按 Space 栏 应水平滚动 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

您也可以使用锚点进行水平滚动... 这里的小例子（滚动 Space 栏）

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

这样的库

Answer 2

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

如果您在与您的示例不同的整个页面上实施此操作，则应注意将 container 更改为正确的元素，如果滚动对齐部分不等于，则更改 window.innerWidth 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>

按 Space 栏键水平滚动整页

Scrolling horizontally by full page on Space Bar key press

javascript

scroll

keyboard-shortcuts

ecmascript-6