CSS中的水平滚动条

Question

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

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

此外,这里是一个链接到一个网站,具有我试图重新创建的确切滚动效果:http://patrickhoelck.com/home.html

Answer 1

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

'overflow:auto'将在必要时添加滚动条.

诀窍是确保可滚动元素内的内容超过元素的正常宽度,而不是简单地回流到新行,在这种情况下它永远不会触发滚动条.一种方法是使用'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>