jquery - Overflow-x 滚动不适用于鼠标滚轮，仅在单击滚动条时有效

Question

我的问题是在我的投资组合页面上使用了水平滚动条。除了一件事，我设法让它工作，它不使用鼠标滚轮滚动....如果我单击并拖动栏它工作得很好。

可以看到我的元素here - 单击投资组合页面，它将向下滑动一个带有滚动条的面板。这是我的问题。

我的结构是这样的:

 <div id="portfolio"><!--this is the sliding panel-->
  <div id="width"><!--this is the thumb container-->
    <article>  
    </article>
  </div>
 </div>

还有我的 CSS:

#portfolio {
     display:none;
     position:absolute;
     width:100%;
     height:400px; // may need to play with this 
     border-bottom:3px solid #CCC;
     top:0px;
     left:0px;
     z-index:99999;
     background-color:#fff;
     box-shadow: 0 0 37px 7px #000;
     overflow-y:hidden;
     overflow-x:scroll;
} 
#width {
    width: 3000px;
    height:320px;
    overflow-y:hidden;
    border:1px solid red;
    float: left;
}

为什么我不能使用鼠标滚轮滚动？

Answer 1

为了水平滚动，您需要按住键盘上的 Shift 键，然后在水平 Canvas 上滚动鼠标。它非常适合您设计的网站。

这是一个用于水平滚动的 jquery 链接。

Scroll Your Page Horizontally