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

Question

[Мар'ян Витак]

Всем привет. Есть вот такой блок: скажите пожалуйста, что нужно сделать, чтобы была возможность скролить этот блок при зажатой левой клавиши мыши.

Answer 1

[Сергей c0re]

draggable scroll

см. статью - JavaScript Scroll by Dragging

Пример

Comments

[Мар'ян Витак]

Спасибо за то, что показали этот плагин. Это помогло сделать прокрутку с помощью мыши. Правда есть один нюанс, если использовать этот плагин, но это очень легко исправить, нужно просто добавить класс dragscroll вручную, чтобы было понятнее покажу свой код:

// Custom Scrollbar.
$(window).on('load', function () {
    $('.home-3__slider').mCustomScrollbar({
        theme:"minimal-dark",
        horizontalScroll: true
    });

    // Scroll by Dragging. https://github.com/asvd/dragscroll
    $('.mCustomScrollBox').addClass('dragscroll');
});

[Сергей c0re]

Мар'ян Витак, да, и js не забыть подключить.

<script type="text/javascript" src="https://cdn.rawgit.com/asvd/dragscroll/master/dragscroll.js"></script>

PS: может отметите решением?

Answer 2

[noteblock]

manos.malihu.gr/jquery-custom-content-scroller

Comments

[Мар'ян Витак]

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

[Мар'ян Витак]

noteblock Маленькое уточнение, зажать лкм не на скроллбаре, а в зоне действия блока, который нужно скролить.

[Сергей c0re]

Мар'ян Витак, Вы по приведенной выше ссылке вообще ходили?
см. раздел Configuration
см. contentTouchScroll

$(selector).mCustomScrollbar({ contentTouchScroll: 30 });

[Мар'ян Витак]

Сергей, Спасибо за уточнение, я просто в поиске прописал mouse и из того, что выбило нужного пункта не было, не подумал что событие может именоваться как touch.

[Сергей c0re]

Мар'ян Витак, так оно работает?

там же написано

Enable or disable content touch-swipe scrolling for touch-enabled devices.

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

[Мар'ян Витак]

Сергей, Только сейчас смог проверить. Не помогло, при свайпе работает, а вот с помощью зажатой мыши не работает.

[Сергей c0re]

м... странн... короче надо draggable scroll