Как сделать прокрутку мышью и пальцем на телефоне блока с overflow: scroll или hidden?

Question

[ymfront]

Есть такой блок с пунктами в одну строку:

.practices_list_wrapper {
  width: 728px;
    overflow-x: scroll;
}

.practices_list {
    display: flex;
    justify-content: space-between;
  width: 1040px;
}

.practice_item {
  list-style: none;
}

.practice_button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 136px;
    height: 46px;
    border: 2px solid #CEA96C;
    border-radius: 6px;
    font-weight: 700;
    font-size: 12px;
    line-height: 16px;
    color: #545454;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    transition: all .3s ease;
}

<div class="practices_list_wrapper">
    <ul class="practices_list">
            <li class="practice_item"><a class="practice_button current" href="#">Пункт 1</a></li>
                <li class="practice_item"><a class="practice_button" href="#">Пункт 2</a></li>
                <li class="practice_item"><a class="practice_button" href="#">Пункт 3</a></li>
                <li class="practice_item"><a class="practice_button" href="#">Пункт 4</a></li>
                <li class="practice_item"><a class="practice_button" href="#">Пункт 5</a></li>
                <li class="practice_item"><a class="practice_button" href="#">Пункт 6</a></li>
                <li class="practice_item"><a class="practice_button" href="#">Пункт 7</a></li>
    </ul>
</div>

Как можно сделать прокрутку блока влево/вправо мышью и пальцем на мобильных устройствах? И желательно при этом скрыть саму полосу прокрутки (overflow: hidden).

Перерыл все, не могу найти решения.

Answer 1

[imko]

Вот так

Comments

[ymfront]

У вас ничего не скроллится, только текст выделяется. И там нет никакого js

[imko]

ymfront, тебе надо именно скриптом крутить? это нативная прокрутка со спрятанным баром, если нужно мышью крутить допиши просто на движение после нажатия scrollBy блоку

Answer 2

[Вадим Белкин]

Гуглите по запросу "кастомный скролл на js" и смотрите готовые решения. Либо реализуйте сами, тут не так сложно же: делаете блок с overflow: hidden, который скрывает переполнение контента и убирает нативный скролл (у вас это будет practices_list_wrapper), слушаете события касания/нажатия для определения начального положения курсора или нажатия, затем слушаете событие перемещения мыши или тача и высчитываете значение на которое изменилось положение курсора - вот на это значение смещаете внутренний блок practices_list внутри practices_list_wrapper имитируя сдвиг при скролле