Question

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

我见过jQuery解决方案，但这是在HTA中使用，所以我不能使用jQuery。是否有纯粹的javascript方法来实现这一目标？

Answer 1

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

可以在Firefox，Safari，Opera，Chrome甚至Internet Explorer中使用，这比我设置的SSE测试案例更能说明... lol

我将免除你对其他人提供的迟钝解决方案的咆哮，以下是可用于即时消息类型客户端的代码示例。

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的可见内容不受添加数据的影响。

Answer 2

document.getElementById('mydiv').scrollTop = 9999999;

scrollTop属性指定从区域顶部开始的滚动偏移（以像素为单位）。将它设置为一个非常大的值会强制它到底。

Answer 3

这个怎么样？

function scroll_to_max(elm) { // {{{
    if(!scroll_to_max_el) {
        scroll_to_max_el = elm;
        setTimeout(scroll_to_max, 10); // Allow for the element to be updated
    } else {
        var el = scroll_to_max_el;
        var t = el.scrollTop;
        el.scrollTop = t+100;
        if(el.scrollTop != t) {
            setTimeout(scroll_to_max, 10); // Keep scrolling till we hit max value
        } else {
            scroll_to_max_el = null;
        }
    }
}
var scroll_to_max_el = null; // Global var!
// }}}

（注意：仅在Chrome中进行过测试...）

Answer 4

迟到的答案，但这更有帮助

$('#mydiv').scrollTop(($('#mydiv').height()*2));

Answer 5

我认为你需要在元素更新后设置scrollTop 。

setTimeout(function (){ el.scrollTop = 999999999 }, 10)

另外，至少在chrome中，99999999999将滚动到底部。但是999999999999（额外的9）将滚动到顶部。它可能转换为webkit的C端的int。

Div Overflow Scroll-bottom：有可能吗？

5 个答案: