如何通过溢出水平滚动元素：隐藏在移动设备上答案

【问题标题】：How to horizontally scroll through element with overflow: hidden on mobile device如何通过溢出水平滚动元素：隐藏在移动设备上
【发布时间】：2014-07-06 23:41:56
【问题描述】：

在过去的几个小时里，这一直让我发疯。

基本上在我响应式编码的设计中，有一个框，数据水平穿过它，框有overflow: hidden，因此您可以看到框中有更多文本，但它只是被隐藏了。目的是能够在移动设备上用手指向下推，向一侧滑动，它会显示更多隐藏的内容，但它不起作用。

这是 jsiddle。

http://jsfiddle.net/8L5v4/2/

任何帮助将非常感谢。

更新我知道我可以使用overflow-x: scroll，但它会显示一个滚动条并且客户端不需要滚动条。

【问题讨论】：

标签： html css

【解决方案1】：

添加overflow-x: scroll，您可以设置滚动条的样式：

http://css-tricks.com/custom-scrollbars-in-webkit/

// CSS selectors to target
::-webkit-scrollbar             
::-webkit-scrollbar-button      
::-webkit-scrollbar-track       
::-webkit-scrollbar-track-piece 
::-webkit-scrollbar-thumb       
::-webkit-scrollbar-corner      
::-webkit-resizer

大多数移动浏览器都是 Webkit，所以这应该可以正常工作（如果不是，您能否指定您需要定位哪些浏览器？）。 Webkit 的人也有一篇关于样式滚动条的文章：

https://www.webkit.org/blog/363/styling-scrollbars/

特别是，“可以将display 属性设置为none 以隐藏特定部分。”

【讨论】：

【解决方案2】：

添加overflow-x:scroll

#fixed-dimensions {
   width: 130px;
   height: 60px;
   overflow-x: scroll;
}

查看此更新链接http://jsfiddle.net/amoljawale/8L5v4/5/

【讨论】：

【解决方案3】：

#fixed-dimensions {
width: 130px;
overflow-x: scroll;
height: 60px;
}

可以借助overflow-x 和overflow-y CSS 属性分别为x 轴和y 轴分配滚动。

Updated Fiddle

【讨论】：