Горизонтальная прокрутка с колесом мыши в div

Как прокручивать по горизонтали в na div с помощью мыши, или перетаскивать с помощью jquery?

Я попробовал draggable, byt в моем коде это не полезно.

Теперь у меня есть горизонтальная полоса прокрутки. Есть ли возможность прокрутки содержимого в моем div с колесом мыши?

Ответы

Ответ 1

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

(function() {
    function scrollHorizontally(e) {
        e = window.event || e;
        var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
        document.getElementById('yourDiv').scrollLeft -= (delta*40); // Multiplied by 40
        e.preventDefault();
    }
    if (document.getElementById('yourDiv').addEventListener) {
        // IE9, Chrome, Safari, Opera
        document.getElementById('yourDiv').addEventListener("mousewheel", scrollHorizontally, false);
        // Firefox
        document.getElementById('yourDiv').addEventListener("DOMMouseScroll", scrollHorizontally, false);
    } else {
        // IE 6/7/8
        document.getElementById('yourDiv').attachEvent("onmousewheel", scrollHorizontally);
    }
})();

Здесь демо, но с document.body и window в качестве целевого элемента: http://rawgit.com/tovic/dte-project/master/full-page-horizontal-scrolling.html

Ответ 2

Я переписал код из ответа @Anonymous-Lettuce. Пересчет ширины элемента пропускается, так как это было ненужным, а иногда и нежелательным. Это также обеспечивает дополнительную функцию для передачи scroll-amount в px плагину.

Используйте это так:

$(document).ready(function(){
    $('#your_div').hScroll(100); // You can pass (optionally) scrolling amount
});

Вот обновленный плагин jquery.hscroll.js:

jQuery(function ($) {
    $.fn.hScroll = function (amount) {
        amount = amount || 120;
        $(this).bind("DOMMouseScroll mousewheel", function (event) {
            var oEvent = event.originalEvent, 
                direction = oEvent.detail ? oEvent.detail * -amount : oEvent.wheelDelta, 
                position = $(this).scrollLeft();
            position += direction > 0 ? -amount : amount;
            $(this).scrollLeft(position);
            event.preventDefault();
        })
    };
});

Вот уменьшенная версия того же jquery.hscroll.min.js:

jQuery(function(e){e.fn.hScroll=function(l){l=l||120,e(this).bind("DOMMouseScroll mousewheel",function(t){var i=t.originalEvent,n=i.detail?i.detail*-l:i.wheelDelta,o=e(this).scrollLeft();o+=n>0?-l:l,e(this).scrollLeft(o),t.preventDefault()})}});

Вот JSFiddle

Ответ 3

Написал этот плагин несколько дней назад.

 $.fn.hScroll = function( options )
 {
   function scroll( obj, e )
   {
     var evt = e.originalEvent;
     var direction = evt.detail ? evt.detail * (-120) : evt.wheelDelta;

     if( direction > 0)
     {
        direction =  $(obj).scrollLeft() - 120;
     }
     else
     {
        direction = $(obj).scrollLeft() + 120;
     }

     $(obj).scrollLeft( direction );

     e.preventDefault();
   }

   $(this).width( $(this).find('div').width() );

   $(this).bind('DOMMouseScroll mousewheel', function( e )
   {
    scroll( this, e );
   });
}

Попробуйте

$(document).ready(function(){
     $('#yourDiv').hScroll();
});

Ширина дочернего элемента div должна быть шире родительского.

Как и 4000 пикселей или что-то в этом роде.

 <div id="yourDiv">
       <div style="width: 4000px;"></div>
 </div>

Ответ 4

Я хотел бы добавить небольшое улучшение в ответ, данный @Taufik.

В контексте модуля es2015:

const el = document.querySelector('#scroller');

function scrollHorizontally(e) {
  e = window.event || e;
  e.preventDefault();
  el.scrollLeft -= (e.wheelDelta || -e.detail);
}

function init() {
  if (!el) {
    return;
  }

  if (el.addEventListener) {
    el.addEventListener('mousewheel', scrollHorizontally, false);
    el.addEventListener('DOMMouseScroll', scrollHorizontally, false);
  } else {
    el.attachEvent('onmousewheel', scrollHorizontally);
  }
}

export default init;

Основное отличие: el.scrollLeft -= (e.wheelDelta || -e.detail);

Используя e.wheelData непосредственно в средстве сдвига прокрутки, мы можем иметь инерцию, так что прокрутка может замедляться постепенно. Я нашел, что это сработало хорошо для меня.

Просто используйте в своем коде так, как будто этот код находится в файле scroller.js):

import scroller from './scroller.js';
scroller();

Ответ 5

В моем случае мне нужно было вернуть прокрутку обратно в нормальное состояние при изменении размера браузера, поэтому я немного изменил код Ижара, чтобы он работал для моего приложения:

Инициируйте hScroll при изменении размера браузера:

$(function () {
     $(window).resize($('.horizontal-scroll').hScroll(60));
});

Проверьте, установлено ли в контейнере свойство white-space на nowrap, и верните, если нет:

$.fn.hScroll = function (amount) {
    var $this = $(this);
    amount = amount || 120;
    $this.bind('DOMMouseScroll mousewheel', function (event) {
         var isHorizontal = $('.horizontal-scroll').css('white-space') == 'nowrap';
         if (!isHorizontal) return;
         var oEvent = event.originalEvent,
        direction = oEvent.detail ? oEvent.detail * -amount : oEvent.wheelDelta,
        position = $this.scrollLeft();
    position += direction > 0 ? -amount : amount;
    $this.scrollLeft(position);
    event.preventDefault();
});

};

Я использую этот медиа-запрос для обновления свойства пробела:

@media (min-width: 768px) {
    .horizontal-scroll { white-space: nowrap !important; }
}

Надеюсь, это поможет любому, кто хочет сделать то же самое.