Как сделать чтобы блок скролился мышкой в overflow-hidden

Question

Возникла проблема. Не пойму как сделать, чтобы блок скролился внутри блока с overflow:hidden. Я нашел решение на реагирование с колесиком мышки, но как сделать, чтобы реагировало на перетаскивание мышкой? Вот ссылка на код:

::-webkit-scrollbar {
     width: 1px;
     height: 1px;
}
 ::-webkit-scrollbar-button {
     width: 1px;
     height: 1px;
}
 body {
     background: #111;
}
 div {
     box-sizing: border-box;
}
 .horizontal-scroll-wrapper {
     position: absolute;
     display: block;
     top: 0;
     left: 0;
     width: calc(250px + 1px);
     max-height: 750px;
     margin: 0;
     padding-top: 1px;
     background: #abc;
     overflow-y: auto;
     overflow-x: hidden;
     transform: rotate(-90deg) translateY(-250px);
     transform-origin: right top;
}
 .horizontal-scroll-wrapper > div {
     display: block;
     padding: 5px;
     background: #cab;
     transform: rotate(90deg);
     transform-origin: right top;
}
 .squares {
     padding: 250px 0 0 0;
}
 .squares > div {
     width: 250px;
     height: 250px;
     margin: 10px 0;
}

<div class="horizontal-scroll-wrapper squares">
  <div>item 1</div>
  <div>item 2</div>
  <div>item 3</div>
  <div>item 4</div>
  <div>item 5</div>
  <div>item 6</div>
  <div>item 7</div>
  <div>item 8</div>
</div>

`

Answer 1

(function(){
let speed = 2; // Скорость скролла.

let scroll = document.querySelector('.scroll');

let left = 0; // отпустили мышку - сохраняем положение скролла
let drag = false;
let coorX = 0; // нажали мышку - сохраняем координаты.

scroll.addEventListener('mousedown', function(e) {
  drag = true;
  coorX = e.pageX - this.offsetLeft;
});
document.addEventListener('mouseup', function() {
  drag = false;
  left = scroll.scrollLeft;
});
scroll.addEventListener('mousemove', function(e) {
  if (drag) {
    this.scrollLeft = left + (e.pageX - this.offsetLeft - coorX)*speed;
  }
});

})();

.scroll {
  position: relative;
  overflow-x: auto;
  overflow-y: hidden;
  height: 200px;
  white-space: nowrap;
}

.block {
  display: inline-block;
  height: 100%;
  width: 80vw;
  background-color: orange;
  border-right: 3px solid #045acf;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

<div class="scroll">
  <div class="block"></div
  ><div class="block"></div
  ><div class="block"></div
  ><div class="block"></div
  ><div class="block"></div>
</div>

БЛОГ НА HUSL

Как сделать чтобы блок скролился мышкой в overflow-hidden

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