水平滚动,无滚动条

Question

我试图模仿的行为overflow-y:hidden来overflow-x,但它不具有相同的行为方式.overflow-x:hidden不允许滚动(通过拖动鼠标).

请参阅:http://jsfiddle.net/Gxm2z/

#container {
    width: 300px
}
#modules {
    height: 50px;
    padding: 5px;
    white-space: nowrap;
    overflow-y: hidden;
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
}
.module {
    display: inline-block;
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    background: #ddd;
}

如果没有滚动条,我怎样才能获得相同的结果？我没关系javascript/jQuery插件.

计划是使用箭头,也许是自定义滚动条

Answer 1

这是我的基于CSS的解决方案 - 在所有设备上简单而美观,无需额外的JS.

• 添加固定高度和隐藏溢出到父元素(在您的情况下#container)
• 放大高度#modules- 这会创建隐藏在滚动条父元素下的足够位置(因为#container高度较小,这个地方是不可见的)

• 使用-webkit-overflow-scrolling:touch;是不错的选择,在iPad和iPhone上做出好的行为

  #container {
      width: 300px;
      height: 60px;
      overflow: hidden;
  }
  #modules {
      height: 90px; /* 40px - more place for scrollbar, is hidden under parent box */
      padding: 5px;
      white-space: nowrap;
      overflow-x: scroll;
      overflow-y: hidden;
      -webkit-overflow-scrolling: touch;
  }
  

现场演示:http://jsfiddle.net/s6wcudua/

Answer 2

您可以尝试使用::-webkit-scrollbar伪元素，如此处所示。