javascript - Div 溢出滚动到底部 : Is it possible?

Question

如果我有一个带有 overflow:auto 的 div 以便它是一个可滚动的 div 并且我加载它的信息使一个重要的滚动区域，有没有办法在我加载信息时，div 显示底部结果？或者基本上滚动到底部？

我看过 jQuery 解决方案，但这是在 HTA 中使用的，所以我不能使用 jQuery。是否有纯 JavaScript 的方式来实现这一点？

Answer 1

var myDiv = document.getElementById('myDiv');
myDiv.scrollTop = myDiv.scrollHeight;

在 Firefox、Safari、Opera、Chrome 甚至 Internet Explorer 中工作，这比我设置的 SSE 测试用例更能说...大声笑

我不会向您提示其他人提供的迟钝解决方案，这里是一个可用于即时消息类型客户端的代码示例。

document.body.onload = function()
{
    var myDiv = document.getElementById('myDiv');
    // Pick your poison below, server sent events, websockets, AJAX, etc.
    var messageSource = new EventSource('somepage');
    messageSource.onmessage = function(event)
    {
        // You must add border widths, padding and margins to the right.
        var isScrolled = myDiv.scrollTop == myDiv.scrollHeight - myDiv.offsetHeight;
        myDiv.innerHTML += event.data;
        if(isScrolled)
            myDiv.scrollTop = myDiv.scrollHeight;
    };
};

该示例的相关部分检查 div 是否已滚动到底部，如果是，则在向其添加数据后将其滚动到底部。如果它尚未滚动到底部，则 div 的滚动位置将保持不变，这样 div 的可见内容不会因添加数据而受到影响。