Javascript Div 溢出滚动到底部：有可能吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4606560/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Div Overflow Scroll-to-bottom: Is it possible?
提问by thepip3r
If I have a divwith overflow:autoso that it is a scrollable divand I load it with information that makes a significant scroll area, is there a way that when I load the information, the divshows the bottom results? Or essentially scrolls to the bottom?
如果我有一个divwithoverflow:auto以便它是可滚动的，div并且我加载它的信息会产生一个重要的滚动区域，有没有办法在我加载信息时div显示底部结果？或者基本上滚动到底部？
I've seen jQuery solutions but this is for use in an HTA so I cannot use jQuery. Is there a purely javascript way to accomplish this?
我见过 jQuery 解决方案，但这是用于 HTA，所以我不能使用 jQuery。有没有一种纯粹的 javascript 方法来实现这一点？
回答by Vreenak
var myDiv = document.getElementById('myDiv');
myDiv.scrollTop = myDiv.scrollHeight;
Works in Firefox, Safari, Opera, Chrome and even Internet Explorer, which is more than I can say for the SSE test case I Set up... lol
适用于 Firefox、Safari、Opera、Chrome 甚至 Internet Explorer，这比我设置的 SSE 测试用例所能说的要多……哈哈
I will spare you the rant about the obtuse solutions offered by others, and here is an example of code that could be used for an instant messaging type client.
我不会对其他人提供的笨拙的解决方案进行咆哮，这里有一个可用于即时消息类型客户端的代码示例。
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;
};
};
The part of that example that is relevant checks to see if the div is already scrolled to the bottom, and if it is, scrolls it to the bottom after adding data to it. If it is not already scrolled to the bottom, the div's scroll position will stay such that the visible content of the div is unaffected by adding the data.
该示例的相关部分检查 div 是否已经滚动到底部，如果是，则在向其添加数据后将其滚动到底部。如果尚未滚动到底部，则 div 的滚动位置将保持不变，这样 div 的可见内容不会因添加数据而受到影响。
回答by Phrogz
回答by Toby
How about this?
这个怎么样？
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!
// }}}
(NOTE: Only tested it in Chrome...)
（注意：仅在 Chrome 中测试过...）
回答by MichaelM
Late answer but this is much more helpful
迟到的答案，但这更有帮助
$('#mydiv').scrollTop(($('#mydiv').height()*2));
$('#mydiv').scrollTop(($('#mydiv').height()*2));
回答by dominic
I think you need to set the scrollTop afterthe element is updated.
我认为您需要在元素更新后设置 scrollTop 。
setTimeout(function (){
el.scrollTop = 999999999
}, 10)
also, in chrome at least, 99999999999 will scroll to the bottom. but 999999999999 (an extra 9) will scroll to the top. it's probably converted to an int in the C side of webkit.
此外，至少在 chrome 中，99999999999 将滚动到底部。但是 999999999999（额外的 9）会滚动到顶部。它可能在 webkit 的 C 端转换为 int。
