在 div 中滚动文本？答案

【问题标题】：Scroll text within a div?在 div 中滚动文本？
【发布时间】：2013-08-02 02:54:51
【问题描述】：

我有一个非常小的 div，我想在其中容纳比它可以容纳的更多的文本，所以我想在它的右侧有一个垂直滚动条，就像通常的滚动条一样。如果我能自定义它的外观就好了。

我通过惰性搜索设法找到的大多数插件都是关于滚动动画和滚动到 DOM 的某个元素的，这不是我想要的。

【问题讨论】：

您只是想自定义滚动条吗？这是我不久前做的一个 CSS 解决方案，但仅适用于 -webkit 浏览器。 codepen.io/brbcoding/pen/xhDbd

【解决方案1】：

修复div的高度，设置其overflow-y为滚动。 http://jsfiddle.net/calder12/pBu8q/

CSS

.restricted{height:150px;overflow-y:scroll}

HTML

<div class="restricted">bunch of text that will make this box scroll</div>

【讨论】：

【解决方案2】：

阅读how to customize a scroll bar

要创建滚动条overflow-y: scroll; 或overflow:auto;，您还需要设置width 和height

【讨论】：

【解决方案3】：

当元素的内容溢出其内容框时，使用overflow: auto 或overflow: scroll（overflow-x 或overflow-y）显示滚动条。

【讨论】：

它在你的演示中，但应该提到你需要指定一个高度才能工作
@sgroves：你不需要，只要元素有溢出。子元素的负下边距，父元素（两个或更多相反距离 [left+right, top+bottom]）或子元素的绝对或固定定位...
好的。取出您示例中的高度并尝试。要让overflow 工作，它需要知道它应该在什么时候开始溢出。这需要一个已知的高度（或 overflow-x 的宽度）。
是的。不明白你在说什么。把height 从你的例子中拿出来看看。是的，有一些方法可以在不指定高度的情况下使其工作，但通常这是溢出工作所需要做的。
@sgroves：我的意思是让内容溢出元素。可以使用height 完成。不过，我认为这属于演示，因为在大多数情况下，如果你有一个小盒子，我会假设它已经以某种方式具有固定的高度（通过定位或设置高度）。不过，取决于OP。 :)

【解决方案4】：

在您的 div 上设置以下 CSS 属性：

overflow-y:scroll;

【讨论】：

【解决方案5】：

只需要 CSS：

#element-name {
    overflow: auto; // hidden: no scrollbar, auto: shows it when needed, scroll: always show scrollbar
}

【讨论】：

【解决方案6】：

尝试在此设置以下 CSS 样式：height 和 width 和 overflow-y: scroll;。（确保它是一个块，display: block;）自定义样式将不得不等待，这是一个快速而肮脏的解决方案。

【讨论】：

【解决方案7】：

【讨论】：