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

Question

Подскажите как реализовать такой скролл? Как реализовать такую анимацию как на сайте https://k24moscow.ru/en/location/ вот этого блока

Может есть библиотеки такие? scrollmagic подключать не хочу т.к. анимация нужна только для одного блока

Answer 1

let element = document.getElementById("scroll");
let cnt = 0





document.addEventListener('wheel', function(event){
    event = event || window.event;
    var y = event.deltaY || event.detail || event.wheelDelta,val=0.1,min = 0,max=0;    

    if(y > 0){      
        cnt = cnt - 20;  
        element.style.transform = 'translate(' + cnt + '%)'
    }
    if(y < 0){
        cnt = cnt + 20;
        element.style.transform = 'translate(' + cnt + '%)'
    }
});

#scroll{
  background-color: red;
  width: 50px;
  height: 500px;
  float: right;
  transform: translate();
}

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="style.css">
    
</head>
<body>
  <div class="container">
    <div id = "scroll"></div>
  </div>

  <script src="./js.js"></script>
</body>
</html>

Что-то типа такого. На коленках

БЛОГ НА HUSL

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

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