Horizontal scrolling with mouse wheel in a div

Question

How to scroll horizontal in na div with mouse wheel, or drag with jquery?

---

I've tried draggable, but in my code it isn't useful.

Now I've got a horizontal scrollbar. Is there a posibility to scroll the content in my div using the mouse wheel?

Answer 1

Try this for horizontal scrolling with mouse wheel. This is pure 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);     } })(); 

Here’s a demo, but with document.body and window as a targetted element: https://taufik-nurrohman.github.io/dte-project/full-page-horizontal-scrolling.html