javascript - 如何在div的底部保持滚动条？

Question

我有很多选项卡，当单击任何选项卡时，会显示一个垂直滚动的 div。 Like facebook 消息页面:当点击任何用户名时。对话框和滚动条默认位于div的底部。

这是标签:

<ul class="companies">
    @foreach (var item in Model)
    {
       <li id='company_@(item.Id)' data-id='@item.Id' >
           <a>@item.Name</a>
       </li>
    }
</ul>

和内容:

@foreach (var item in Model)
{
   <div id="scrollingDiv"  class="scrollingDiv"> @item.News </div>
}

和 CSS:

.scrollingDiv {
    overflow-x: hidden;
    max-height: 500px;
    overflow-y: scroll;
}

我想在单击任何选项卡时将滚动条保持在底部。 (总是看到最新消息)。也是当前的div。我检查了 this问题。但不适用于我的应用程序。我该如何解决这个问题？

Answer 1

使用 JavaScript，你可以做类似的事情

var d = document.getElementById('myDiv');

if(d.scrollHeight > d.clientHeight) {
  d.scrollTop = d.scrollHeight - d.clientHeight;
}

并在每次向 div 添加内容或希望可滚动容器滚动到底部时执行此逻辑。