Скролл внутри контейнера по горизонтали

Чтобы внедрить функционал скролла (перетаскивания) внутри контейнера, используя нижеследующий HTML, пропишем контейнеру и элементам стили:

<div class="configurator__actions" id="dragContainer">
    <div class="item">Элемент 1</div>
    <div class="item">Элемент 2</div>
    <div class="item">Элемент 3</div>
</div>

<style>
.configurator__actions {
    display: flex;
    flex-wrap: nowrap;
    overflow: auto;
    gap: .5rem;
    -ms-overflow-style: none;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    cursor: grab; /* Показывает, что можно таскать */
    user-select: none; /* Запрещает выделение текста при перетаскивании */
}

.configurator__actions::-webkit-scrollbar {
    display: none; /* Скрывает скроллбар для WebKit браузеров */
}

.configurator__actions:active {
    cursor: grabbing; /* Меняет курсор при перетаскивании */
}

.item {
    padding: 1rem;
    background: #f0f0f0;
    border-radius: 8px;
    flex-shrink: 0; /* Запрещает элементам сжиматься */
}
</style>

Для работы самого скроллинга понадобится скрипт:

<script>
class DragScroll {
    constructor(container) {
        this.container = container;
        this.isDown = false;
        this.startX;
        this.scrollLeft;

        this.bindEvents();
    }

    bindEvents() {
        this.container.addEventListener('mousedown', (e) => {
            this.isDown = true;
            this.startX = e.pageX - this.container.offsetLeft;
            this.scrollLeft = this.container.scrollLeft;
            this.container.style.cursor = 'grabbing';
        });

        this.container.addEventListener('mouseleave', () => {
            this.isDown = false;
            this.container.style.cursor = 'grab';
        });

        this.container.addEventListener('mouseup', () => {
            this.isDown = false;
            this.container.style.cursor = 'grab';
        });

        this.container.addEventListener('mousemove', (e) => {
            if(!this.isDown) return;
            e.preventDefault();
            const x = e.pageX - this.container.offsetLeft;
            const walk = (x - this.startX) * 2; // Скорость прокрутки
            this.container.scrollLeft = this.scrollLeft - walk;
        });
    }
}

// Инициализация для контейнера
const container = document.getElementById('dragContainer');
new DragScroll(container);
</script>