我试图模仿overflow-y的行为：隐藏到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插件.
计划是使用箭头,也许是自定义滚动条
解决方法
这是我的基于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;
}
