Desplazamiento horizontal con la rueda del mouse en un div

Question

Cómo desplazarse horizontalmente en div con mouse whell, o arrastrar con jquery?

---

He intentado arrastrar, pero en mi código no es útil.

Ahora tengo una barra de desplazamiento horizontal. ¿Existe la posibilidad de desplazar el contenido en mi div con la rueda del mouse?

Answer 1

Escribió este complemento hace unos días.

$.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); 
    }); 
} 

intentarlo con

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

El ancho del elemento hijo del div debe ser más ancha que la de los padres.

Me gusta 4000 px o algo así.

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

Answer 2

Pruebe esto para el desplazamiento horizontal con la rueda del mouse. Esto es pura 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); 
    } 
})(); 

Aquí es una demo, pero con document.body y window como elemento targetted: http://rawgit.com/tovic/dte-project/master/full-page-horizontal-scrolling.html

Answer 3

he reescrito el código de la respuesta por Anónimo @-lechuga. El cálculo de ancho del elemento se salta porque no era necesario y, a veces, no era deseable. Esto también proporciona una función adicional para pasar scroll-amount en px al complemento.

utilizar de esta manera:

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

aquí va el plugin actualizado 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(); 
     }) 
    }; 
}); 

Aquí está la versión miniaturizada de la misma 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()})}}); 

Aquí es el JSFiddle

Answer 4

Me gustaría añadir una ligera mejora a la respuesta dada por @Taufik.

En el contexto de un módulo 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; 

los principales son la diferencia: el.scrollLeft -= (e.wheelDelta || -e.detail);

Utilizando el e.wheelData directamente en el rollo de compensación significa que podemos tener la inercia, de modo que el desplazamiento puede disminuir la velocidad gradualmente Encontré que esto funcionó bien para mí.

Simplemente use en su código como tal (suponiendo que el código anterior se encuentre en un archivo llamado scroller).js):

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