html - scrolling - Desplazamiento horizontal con la rueda del mouse en un div

scroll html horizontal

Question

¿Cómo desplazarse horizontalmente en na 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 plugin hace 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 );
   });
}

Pruébalo con

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

El ancho del elemento hijo del div debe ser más ancho que el padre.

Como 4000 px o algo.

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

Answer 2

Pruebe esto para desplazamiento horizontal con la rueda del mouse. Esto es JavaScript puro:

(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í hay una demostración, pero con document.body y window como un elemento objetivo: http://rawgit.com/tovic/dte-project/master/full-page-horizontal-scrolling.html

Answer 3

He reescrito el código de la respuesta por @ Anonymous-Lettuce. 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.

Úselo así:

$(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 reducida del mismo 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í está el JSFiddle

Answer 4

Me gustaría agregar 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;

La diferencia principal es: el.scrollLeft -= (e.wheelDelta || -e.detail);

El uso de e.wheelData directamente en el desplazamiento de desplazamiento significa que podemos tener la inercia , por lo que el desplazamiento puede disminuir gradualmente. Encontré que esto funcionó bien para mí.

Solo 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();