Как сделать из вертикального скролла горизонтальный?

Question

[rybkinIt]

Здесь представлен код скролла с эффектом,
я пытаюсь сделать такой же эффект при горизонтальном скролле, но никак не могу

https://codepen.io/zzzzl/pen/MxNgaR

Answer 1

[rybkinIt]

нужно было добавить еще scrollBy и проблема решилась, вот код на js
и поменять translateY на translateX
let y = 0

document.body.addEventListener('wheel', (e) => {
const height = document.body.offsetWidth
y = y + e.wheelDeltaY

if(y < -height + window.innerWidth) {
window.scrollBy(y, window.innerWidth)
}
console.log(y)
if(y > 0) {
y = 0
}
console.log(y)
const tr = `translateX(${y}px)`
document.body.style.transform = tr

})

Answer 2

[Сергей delphinpro]

Если это продолжение вашего предыдущего вопроса, то ответ уже дан. Слушайте wheel и перемещайте блок по горизонтали. Других решений тут не будет. Для изменения плавности перемещения можно использовать простейшую анимацию ease-in-out, или через cubic-bezier подобрать нужное.
По сути в первом вопросе это даже не скролл, а именно перемещение блока по горизонтали.

Comments

[rybkinIt]

я слушаю событие wheel, меняю height на width, растягиваю блоги но scroll не появляется

[Сергей delphinpro]

rybkinIt, Не нужен скролл.

Просто какой-то блок

.wrapper > .container

.wrapper {
  overflow: hidden;
  width: 100%;
  height: 100vh;
}

.container {
  height: 100vh;
}

document.querySelector('.wrapper').addEventListener('wheel', function(e){
  if (e.deltaY > 0) {
    document.querySelector('.container').style.transform = 'translateX(-100px)';
  }
  if (e.deltaY < 0) {
    document.querySelector('.container').style.transform = 'translateX(+100px)';
  }
});

Только в таком виде оно будет работать в пределах от -100 до 100, то есть одно движение влево и одно вправо. Для рабочего варианта, нужно считывать текущее значение смещения (или хранить его в отдельной переменной), изменять его и применять.

Для плавности в простейшем варианте добавить

.container {
  transition: transform 1s ease;
}

Или другую функцию переходов, я писал выше.