Question

I have a div with a nested div that are larger. The overflow-x is set to auto, such a scroll bare appears. I would like to make such that if the user scrolls(with the mouse wheel) within the div, the scrollbar scrolls horizontal.

<div id="outer" style="width:1000px;overflow-x:auto">
      <div id="inner" style="width:2000px"></div>
</div>

What kind of javascript is needed for this. Remember that the scrollbar comes automatic, not looking for a solution with javascript changing left/right positions.

Answer 1

Why changing scrollLeft doesn’t fit you?

document.getElementById('outer').addEventListener('mousewheel', function(e) {
  this.scrollLeft -= (e.wheelDelta);
  e.preventDefault();
}, false);