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

Question

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

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

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

Answer 1

我刚刚使用了 link 中建议的 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 还有。

希望这就是您要找的。

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

Horizontal scroll AND vertical scroll in the same page

html

horizontal-scrolling

vertical-scrolling