Question

我正在尝试模仿overflow-y:hidden到overflow-x的行为，但它的行为方式并不相同。 overflow-x:hidden不允许滚动（通过拖动鼠标）。

#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

http://iscrolljs.com/

我认为最好的Javascript自定义滚动条可用。它将在移动，IE9 +和现代浏览器中运行良好。很多选择和回调。是的，您可以禁用可见滚动条，但仍保留水平滚动。

Answer 3

您可以尝试使用::-webkit-scrollbar伪元素，如here.

所示

Answer 4

#modules {
    height: 50px;
    padding: 5px;
    white-space: nowrap;
    overflow-y: hidden;
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
    &::-webkit-scrollbar {
       display: none;
    }
}

这仅适用于基于Webkit的浏览器。

水平滚动，无滚动条

4 个答案: