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

Question

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

你可以在这里看到我的项目——点击投资组合页面，它会向下滑动一个带有滚动条的面板。还有我的问题。

我的结构是这样的：

 <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 键，然后在水平画布上滚动鼠标。它非常适合您设计的网站。

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

水平滚动页面