Как сделать горизонтальную прокрутку как на мобильном устройстве?

Question

[Ismail-1]

<div class="wrapper">
              <div class="item">Item</div>
              <div class="item">Item</div>
              <div class="item">Item</div>
              <div class="item">Item</div>
              <div class="item">Item</div>
     </div>

.wrapper{
    display: flex;
    width: 100%;
    white-space: nowrap;
    overflow-x: scroll;
    padding: 5px 0;
}

Добрый вечер!
На телефоне если что то не влезло в блок wrapper можно прокрутить горизонтально перетащив пальцем.

На компьютере я скрываю полосу прокрутки снизу, как мне сделать чтоб можно было прокручивать горизонтально мышью, как пальцем на телефоне?

Comments

[Вадим]

В чём вопрос то?
Делайте контент больше чем размер блока и вот вам горизонтальный скролл.

[Ismail-1]

Вадим,
На телефоне можно прокрутить перетащив пальцем, а если на компьютере скрыть полосу прокрутки, то как прокрутить мышкой

[Вадим]

Ismail-1, шифт + колёсико - горизонтальный скролл.

[Ismail-1]

Вадим,
Я наверно не точно выразил свой вопрос
Если у блока wrapper появляется полоса прокрутки то я могу прокручивать этот блок двигая ползунок вправо или влево.

А как сделать чтоб блок прокручивался если я кликаю на item и виду мышь в право или в лево, то-есть такой же принцип как если бы я двигал ползунком

[Вадим]

Ismail-1, ну вот это уже другое дело :-)
Вам ниже уже все по делу рассказали. Такое поведение не ожидается на десктопе и нужно пользователю либо подсказать об этом - поменять курсор на тип move, а так же сделать так, чтоб сбоку контент был чуть чуть спрятан за границей, тем самым вызывая у пользователя желание его посмотреть, после чего он наведёт туда мышкой, увидеть другой курсор и станет понятно.
Либо не делать так на десктопе) либо сделать стрелочку которая будет прокручивать по нажатию на определённое количество или типа того

[Ismail-1]

Благодарю за ответ

Answer 1

[Kotaro Hiba]

Можешь отслеживать зажатие мыши над элементом. После чего читать движение влево вправо и на это же расстояние двигать скролл

document.getElementById('block').mousemove = function(e) {
    if (e.which == 1) {} // Нажата левая кнопка мыши
    if (e.which == 2) {} // Нажато колёсико мыши
    if (e.which == 3) {} // Нажата правая кнопка мыши
}

В целом можешь между срабатываниями считать разницу в координатах и менять значение у елемента element.scrollLeft

Я бы так сделал, но не знаю на сколько это нужно, скорее всего пользователь просто не поймет, что там нужно скролить, если ему это никак не обозначить + рушится опыт пользователя т.к я не видел, что бы где то на десктопе делали скролл вбок при помощи мыши (не считая слайдеров)

Comments

[Ismail-1]

Благодарю за ответ, да на данный момент решил отказаться от такого подхода. Но теперь буду знать как это реализовывается