溢出：隐藏但让内容自动滚动答案

【问题标题】：overflow:hidden but let the content auto-scroll溢出：隐藏但让内容自动滚动
【发布时间】：2011-12-01 13:22:06
【问题描述】：

我有一个 div，其中内容通过查询的append() 定期附加到它上面。随着内容变长，最终会溢出div。我不希望在溢出时出现滚动条，但仍然让内容向上滚动以显示下面的新内容。

这可能吗？当我使用overflow-x: hidden 时，没有滚动条出现，但内容被隐藏了。

【问题讨论】：

【解决方案1】：

如果容器的大小是固定的，您可以将内容放在绝对定位的包装内，如下所示：

<div class="container">
    <div class="wrap">
        <p>bah</p>
    </div>
</div>

和css：

.container {
    y-overflow: hidden;
    position: relative;
    height: 200px;
    width: 200px;
}

.wrap {position:absolute; bottom: 0; left:0;right:0;
}

http://jsfiddle.net/sXGd9/

【讨论】：

【解决方案2】：

append() 将添加到最后的内容中。您可能想要prepend() 新内容，以便在旧内容之前添加数据。

至于overflow，您可以将其设置为scroll，以便在必要时出现滚动条，或者设置为hidden，这样不会出现滚动条但内容不可见。否则，您可以将其设置为visible，这样它就会可见，但不会出现滚动条。

您希望溢出的内容可见吗？如果是这样设置overflow: visible，否则设置overflow: hidden（因为你不想要滚动条）。无论如何，您将无法滚动内容。如果需要滚动，则必须构建自己的滚动系统，将事件处理程序添加到容器中。

【讨论】：

【解决方案3】：

如果您将“#container”div 中的每个附加内容包装在单独的“.append”div 中，您可以执行以下操作：

var pos = $('#container div:last').position();
$('#container').scrollTop(pos.top);

这有用吗？

其他解决方案可以在之前的帖子中找到： How do I scroll a row of a table into view (element.scrollintoView) using jQuery?

【讨论】：