2

Всем привет. Есть вот такой блок:введите сюда описание изображения скажите пожалуйста, что нужно сделать, чтобы была возможность скролить этот блок при зажатой левой клавиши мыши.

1 ответ 1

4

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

Можно запариться, измерять расстояние между точками нажатия и отпускания, разделить на пройденное время - в зависимости от этого числа поставить setInterval, который по инерции продолжит скроллить несколько миллисекунд.

1
  • Спасибо, это именно то, что нужно. 3 сен 2019 в 22:47

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.