Горизонтальные скрулбары (scrollbar) становятся все популярны и как же реализовать его у себя на сайте и чтобы можно было двигать не только с помощью полосы прокрутки, но и с помощью мыши читайте в этой статье. Я буду использовать JS, css, html.
Задумался я над созданием скрулбара когда решил обновить дизайн своего сайта 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 .
