Задумался я над созданием скрулбара когда решил обновить дизайн своего сайта sefil.ru и сделать его адаптивным. Я перепробовал разные способы и методы и смог все таки решить данную задачу.

Для начала нам нужно задать контейнер для нашего скрулбара, задать ширину высоту, и добавить какие-то элементы.

Структуру HTML

<div class="items">
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
    </div>

И соответственно стили CSS.

.items {   position: relative;    overflow-x: scroll;  overflow-y: hidden;  white-space: nowrap;  transition: all 0.2s;   will-change: transform; user-select: none;  cursor: pointer; }

 .item {   display: inline-block; background: skyblue; min-height: 250px; min-width: 400px;margin: 2em 1em;}

Как можно заметить ниже прокручивать можно, но только с помощью полосы прокрутки, я же хотел добиться чтобы двигать можно было с помощью мыши, поэтому придется подключать JS.

Вот собственно небольшой код JS.

const slider = document.querySelector('.items');
let isDown = false;
let startX;
let scrollLeft;

slider.addEventListener('mousedown', (e) => {
  isDown = true;
  slider.classList.add('active');
  startX = e.pageX - slider.offsetLeft;
  scrollLeft = slider.scrollLeft;
});
slider.addEventListener('mouseleave', () => {
  isDown = false;
  slider.classList.remove('active');
});
slider.addEventListener('mouseup', () => {
  isDown = false;
  slider.classList.remove('active');
});
slider.addEventListener('mousemove', (e) => {
  if(!isDown) return;
  e.preventDefault();
  const x = e.pageX - slider.offsetLeft;
  const walk = (x - startX) * 1; //scroll-fast
  slider.scrollLeft = scrollLeft - walk;
  console.log(walk);
});

И вот результат получившегося контейнера, который можно перемещать с помощью мыши.

Если вам была полезна данная статья, то поделитесь данной статьей в социальной сети. А если вам нужна помощь в настройке сайта, нужна верстка или что то еще то жду Вас на kwork .