如何在溢出时水平滚动元素：隐藏在移动设备上

Question

这让我在过去的几个小时里疯狂了。

基本上在设计中我响应地编码有一个框，数据横向穿过它，框有overflow: hidden，所以你可以看到框中有更多的文字，但它只是隐藏了。目的是能够用手指在移动设备上向下按，向侧面滑动，它将显示更多隐藏的内容，但它不起作用。

这是jsiddle。

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

任何帮助都会非常感谢。

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

Answer 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/

特别是＆＃34; display属性可以设置为none以隐藏特定部分。＆＃34;

Answer 2

添加overflow-x:scroll

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

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

Answer 3

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

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

Updated Fiddle