有一个jQuery插件可以帮助你完成这一点，叫做jQuery Mousewheel。CSS技巧的Chris Coyier在他的示例here中使用了它，它基本上将Y轴滚动转换为X轴滚动：

// Code by Chris Coyier
$(function() {
    $("body").mousewheel(function(event, delta) {
        this.scrollLeft -= (delta * 30);
        event.preventDefault();
    });
});

您可以使用wheel事件并将deltaY转换为X。
基本上：

$(".inner").on("wheel", function() { 
    var outer = $(this).closest(".outer");
    outer.scrollLeft(outer.scrollLeft() + e.originalEvent.deltaY);
    e.preventDefault();
});

但是这有点不稳定，所以你可以添加一个动画测试，如果动画时间太长的话，这个测试会很笨拙，因此使用了exta .stop()。
你可以使用css转换来实现更好的动画/更平滑的滚动。

$("#inner").on("wheel", function(e) {
  var outer = $(this).closest("#outer")
  //outer.scrollLeft(outer.scrollLeft() + e.originalEvent.deltaY)
  outer.stop(false,false).animate({scrollLeft:"+="+e.originalEvent.deltaY}, 50)
  e.preventDefault();
});

#outer {
  display:block;
  width:200px;
  height:100px;
  overflow-y:hidden;
  overflow-x:scroll;
  border:1px solid red
}
#inner {
  display:block;
  width: 500px;
  height:100px;
  border:1px solid blue;
  background: blue;
  background: -webkit-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
  background: -o-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
  background: -moz-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
  background: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet); 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='outer'>
<div id='inner'>
</div>
</div>

（显然不要使用mousehweel，因为它是非标准的-可能是jquery为您处理的）。