在同一页面中水平滚动和垂直滚动

Question

是否可以在同一页面中使用鼠标滚轮启用垂直滚动？ 我想正常滚动页面，但在某些#div's 我想水平滚动。

这是一个 jsfiddle http://jsfiddle.net/sw5Lybsm/

我尝试了很多东西并搜索了整个互联网，但没有成功:(

Answer 1

我刚刚使用了此链接中建议的 jquery 库：

CSS Trick

我让它垂直和水平工作：

这是fiddle

我只是在包含 jquery 文件后使用了这段代码：

$(document).ready(function(){

   $("#scroll").mousewheel(function(event, delta) {

      this.scrollLeft -= (delta * 30);
    
      event.preventDefault();

   });
    $("#scroll1").mousewheel(function(event, delta) {

      this.scrollLeft -= (delta * 30);
    
      event.preventDefault();

   });
    $("#scroll2").mousewheel(function(event, delta) {

      this.scrollLeft -= (delta * 30);
    
      event.preventDefault();

   });
    $("#scroll3").mousewheel(function(event, delta) {

      this.scrollLeft -= (delta * 30);
    
      event.preventDefault();

   });
});

而且它不能在所有具有相同 id="scroll" 的元素上工作，所以我将下一个滚动 div 重命名为#scroll1、#scroll2...等，并将它们也添加到 CSS 中。

我希望这将是您正在寻找的。​​p>