可水平滚动，无滚动条 [英] Horizontally scrollable without scrollbar

问题描述

我试图模仿 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/

这篇关于可水平滚动，无滚动条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！