JS Поменять местами события вертикального и горизонтального скролла

Question

Как реализовать, что бы при прокрутки страци вниз, внутренний блок скролился вправо, а при прокрутки вверх, влево ? Приведу пример

let wrapperBlock = document.querySelector(".list");


window.addEventListener("scroll", onWheel);

    function onWheel(event, delta) {
        console.log("delta = " + delta);
        
        if(delta > 1) {
            wrapperBlock.scrollLeft -= 150;
        }
        else {
            wrapperBlock.scrollLeft += 150;
        }
    }

body {
  margin: 0;
}

.list {
  min-width: 100%;
  display: grid;
  grid-gap: 0 30px;
  grid-auto-columns: calc(25% - 30px);
  grid-auto-flow: column;
}

.item {
  width: 100%;
  background: pink;
  min-height: 100px;
}

<div class="list">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
</div>

Пробую подцепить отслеживание события на скролл, а потом прибавлять, или отнимать коэффициент прокрутки delta. Но пока явно что-то не то. *Как это делать на чистом JS?

Answer 1

let list = document.querySelector(".list"), x = 0
  
window.addEventListener("wheel", onWheel)

function onWheel(event) {
  x += event.deltaY > 0 ? 100 : -100
  window.scroll(x, 0)
}

body {
  margin: 0;
}

.list {
  min-width: 100%;
  display: grid;
  grid-gap: 0 30px;
  grid-auto-columns: calc(25% - 30px);
  grid-auto-flow: column;
}

.item {
  width: 100%;
  background: pink;
  min-height: 100px;
}

<div class="list">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
</div>

Второй вариант

let list = document.querySelector(".list"), dir, i, x, isOkToScroll
setDefault()

window.addEventListener("wheel", onWheel)

function onWheel(event) {
  dir = event.deltaY > 0 ? 1 : -1
  isOkToScroll = true
}

requestAnimationFrame(scroll)

function scroll() {
  requestAnimationFrame(scroll)
  if (!isOkToScroll) return;
  
  if (i < 28) i++
  else setDefault()

  window.scrollBy(i * dir, 0)
}

function setDefault() {
  isOkToScroll = false
  i = 1
  x = 0
  dir = 0
}

body {
  margin: 0;
}

.list {
  min-width: 100%;
  display: grid;
  grid-gap: 0 30px;
  grid-auto-columns: calc(25% - 30px);
  grid-auto-flow: column;
}

.item {
  width: 100%;
  background: pink;
  min-height: 100px;
}

<div class="list">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
</div>

БЛОГ НА HUSL

JS Поменять местами события вертикального и горизонтального скролла

Ответы (1 шт):