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

概述我试图模仿overflow-y的行为：隐藏到overflow-x,但它的行为方式不同. overflow-x：hidden不允许滚动(通过拖动鼠标). 见：http://jsfiddle.net/Gxm2z/ #container { width: 300px}#modules { height: 50px; padding: 5px; white-space: 我试图模仿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/

总结

以上是内存溢出为你收集整理的html – 不带滚动条的水平滚动全部内容，希望文章能够帮你解决html – 不带滚动条的水平滚动所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。