@deniskins23

Как реализовать прокрутку блока тачпадом или зажатой левой кнопкой мыши?

Доброго времени суток.
Подскажите, на сайте есть блок, при наведении на блок в нем прокручивается контент(только в блоке). Прокрутка работает нормально колесом мыши, а как сделать чтобы если это трекпад или пользователь просто зажал левую кнопку мыши и хочет полистать drag and drop ? Может плагины или события какие-то? Если не трудно, можно с примером, чтобы лишних вопросов сразу не возникало.
Вот пример сайта, там во второй секции в экране компьютера есть блок. ito.deep-webb.ru
Заранее спасибо.
  • Вопрос задан
  • 634 просмотра
Пригласить эксперта
Ответы на вопрос 1
@deniskins23 Автор вопроса
Нашел вот такое решение. Меняем прокрутку с Y на X и все работает.
jQuery(function ($) {
    var $doc = $(document),
        ratio = $doc.width() / $(window).width(), //отношение окна к общей ширене блока, чтобы тянуть весь блок.
        mousepos, to;
    $doc.on('mousedown', '#content', dragstart);

    function dragstart(e) {
        e.preventDefault();
        mousepos = e.screenX;
        $doc.on('mousemove.drag', drag); //в неймспейсе drag, чтобы потом отключить безболезненно для остальных листенеров
        $doc.one('mouseup', dragstop);
    }

    function drag(e) {
        clearTimeout(to);
        var delta = (e.screenX - mousepos) * ratio;
        to = setTimeout(function () { // таймаут чтобы события от мыши не перекрывали друг друга, 
            $doc.scrollLeft($doc.scrollLeft() + delta);
            mousepos = e.screenX;
        }, 1);
    }

    function dragstop() {
        $doc.off('mousemove.drag'); //отключаем свой mousemove.
    }

});
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы