在控制台列表中的绝对对象上滚动

Question

我有一个命令列表，如果一个新的命令被添加(通过angular代码)，它将在底部可见，溢出到顶部，就像一个控制台。

这是我目前拥有的:

<div style="border: 2px solid #000000; height: 200px; width: 300px; position: relative; overflow-x: auto;">
<div style="position: absolute; bottom: 0;">
<p>oldest</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>latest</p>
</div>
</div>

它确实像我想要的那样工作，但是有了这个设置，我不能再滚动到旧的命令。我知道不能让滚动条再次显示，但这只会破坏顶部的溢出。

你知道我该怎么做吗?

Answer 1

在这种情况下，您必须将内部div的高度设置为其父元素的100%，并启用该元素的滚动。像这样:

$('div').animate({
scrollTop: $("#scroll-div p").last().offset().top
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="border: 2px solid #000000; height: 200px; width: 300px; position: relative; overflow-x: auto;">
<div id="scroll-div"  style="position: absolute; bottom: 0; height: 100%;width: 100%">
<p>oldest</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>latest</p>
<p>Test</p>
<p>latest</p>
<p>latest</p>
<p>latest</p>
<p>latest2</p>
</div>
</div>

编辑:如果你想滚动到容器的最新元素，你将需要JavaScript或jQuery在元素的底部滚动。我只是为此添加了一个jQuery函数，如下所示。希望对你有所帮助:)