html - 如何水平滚动元素溢出 : hidden on mobile device

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/

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