Прокрутка по горизонтали на полную страницу при нажатии клавиши пробела - PullRequest
1 голос
/ 05 ноября 2019

Все основные браузеры допускают вертикальную прокрутку страниц, нажимая Пробел на клавиатуре. Однако этот ярлык не работает, если страница полностью горизонтальная. Кроме того, нажатие клавиш Home и End не работает для перехода к началу и концу страницы.

Как я могу переделать эту функцию для горизонтальной прокрутки с простымvanilla 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>

Ответы [ 2 ]

2 голосов
/ 05 ноября 2019

Использование scrollTo() на контейнере, в вашем случае document.documentElement, создает довольно убедительный клон стандартного вертикального пробела прокрутки.

Если вы реализуете это на полной странице, которая отличается от вашего примера, вы должны позаботиться о том, чтобы изменить 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>
0 голосов
/ 05 ноября 2019

Вы также можете использовать привязку для горизонтальной прокрутки ... Небольшой пример здесь (прокрутка на пробел)

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

...