问题描述
我试图模仿 overflow-y:hidden
到 overflow-x
的行为,不具有相同的行为。 overflow-x:hidden
不允许滚动(通过拖动)。
I'm trying to mimic the behavior of overflow-y:hidden
to overflow-x
, but it doesn't behave the same way. overflow-x:hidden
doesn't allow to scroll (by dragging).
http://jsfiddle.net/Gxm2z/ =nofollow> http://jsfiddle.net/Gxm2z/
See: 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;
}
如果没有滚动条,如何获得相同的结果?
How can I achieve the same result without a scroll bar? I'm ok with a javascript/jQuery plugin.
计划是使用箭头,也许是一个自定义滚动条
The plan is to use arrows, and maybe a custom scrollbar
推荐答案
这是我的解决方案基于CSS - 在所有设备上简单和漂亮,不需要额外的JS。
this is my solution CSS based - simple and nice on all devices, no need for additional JS.
- 向父元素添加固定高度和溢出隐藏(在
#container
中) - c $ c> #modules - 这创建足够的地方隐藏在父元素下的滚动条(因为较小的
#container
高度,这个地方是不可见的)
- add fixed height and overflow hidden to parent element (in your case
#container
) - enlarge height of
#modules
- this create enough place hidden under parent element for scrollbar (because of smaller#container
height, this place is invisible) using
-webkit-overflow-scrolling:touch;
is good choice, make nice behavior on iPad and 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;
}
现场演示: a href =http://jsfiddle.net/s6wcudua/ =nofollow noreferrer> http://jsfiddle.net/s6wcudua/
live demo: http://jsfiddle.net/s6wcudua/
这篇关于可水平滚动,无滚动条的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!