html – 不带滚动条的水平滚动

我试图模仿overflow-y的行为：隐藏到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插件.

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

解决方法

这是我的基于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/

原文地址：https://www.jb51.cc/html/231731.html