在空格键上按整页水平滚动

2024-05-14 • 问答

所有主流浏览器都可以通过按下键盘上的空格键来进行垂直页面滚动。但是，如果页面完全水平，则此快捷方式不起作用。另外，按 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>

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

如果您在与示例示例不同的整页上实施此操作，则应注意将container更改为适当的元素，如果滚动捕捉部分不等于{{ 1}}。

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;
};

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

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中的顺丁香酚对我来说一点都不难... 使用像Jquery这样的库...

在空格键上按整页水平滚动

lmzml 回答：在空格键上按整页水平滚动

大家都在问