CSS中的水平滚动条

Question

我一直试图在我的上下文部分添加一个滚动条，只允许框在观察者屏幕的可见范围内水平滚动，而不是垂直。

有没有人知道在流畅的css布局设计中div中有可滚动内容的代码？

此外，这里有一个指向我正在尝试重新创建的确切滚动效果的网站的链接：http://patrickhoelck.com/home.html

Answer 1

  

有没有人知道在流畅的css布局设计中div中有可滚动内容的代码？

'溢出：自动'将在必要时添加滚动条。

技巧是确保可滚动元素内的内容超出元素的正常宽度，而不是简单地回流到新行，在这种情况下它永远不会触发滚动条。一种方法是使用'white-space：nowrap'。

Answer 2

你可能想看一下overflow-x: scroll，如果内容太宽，它会在父节点上设置一个固定大小，会强制使用水平滚动条。

一些示例html：

<div style="width: 50px; overflow-x: scroll">
    <p>Hello world!</p>
    <p>Here is a div with a horizontal scrollbar!</p>
</div>