Question

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

这可能吗？当我使用overflow-x: hidden时，不会显示滚动条，但会隐藏内容。

Answer 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/

Answer 2

append()会在最后添加内容。您可能需要prepend()个新内容，因此数据会在旧内容之前添加。

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

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

Answer 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?

overflow：隐藏但让内容自动滚动

3 个答案: