我正在使用Ajax请求创建聊天,我试图让消息div滚动到底部没有太多运气。
我将所有内容都包装在这个div中:
#scroll {
height:400px;
overflow:scroll;
}
是否有一种方法来保持它滚动到底部默认使用JS?
有办法保持它滚动到ajax请求后的底部吗?
我正在使用Ajax请求创建聊天,我试图让消息div滚动到底部没有太多运气。
我将所有内容都包装在这个div中:
#scroll {
height:400px;
overflow:scroll;
}
是否有一种方法来保持它滚动到底部默认使用JS?
有办法保持它滚动到ajax请求后的底部吗?
当前回答
使用:
var element= $('element');
var maxScrollTop = element[0].scrollHeight - element.outerHeight();
element.scrollTop(maxScrollTop);
或检查滚动到底部:
var element = $(element);
var maxScrollTop = element[0].scrollHeight - element.outerHeight();
element.on('scroll', function() {
if ( element.scrollTop() >= maxScrollTop ) {
alert('scroll to bottom');
}
});
其他回答
var mydiv = $("#scroll");
mydiv.scrollTop(mydiv.prop("scrollHeight"));
来自jQuery 1.6的工作
https://api.jquery.com/scrollTop/
http://api.jquery.com/prop/
更新的方法,适用于所有当前浏览器:
this.scrollIntoView(false);
将到可滚动元素顶部的距离设置为元素的总高度。
const element = this.shadowRoot.getElementById('my-scrollable-div')
element.scrollTop = element.scrollHeight
小附录:仅限滚动,如果最后一行已经可见。如果滚动一点点,将内容留在原地(注意:没有测试过不同的字体大小。这可能需要在">= compare "中进行一些调整):
var objDiv = document.getElementById(id);
var doScroll=objDiv.scrollTop>=(objDiv.scrollHeight-objDiv.clientHeight);
// add new content to div
$('#' + id ).append("new line at end<br>"); // this is jquery!
// doScroll is true, if we the bottom line is already visible
if( doScroll) objDiv.scrollTop = objDiv.scrollHeight;
只是作为一个额外的片段。我正在使用angular,并试图在用户选择与用户的不同对话时将消息线程滚动到底部。为了确保在使用ng-repeat for消息将新数据加载到div之后滚动仍然有效,只需在超时时间内包装滚动片段。
$timeout(function(){
var messageThread = document.getElementById('message-thread-div-id');
messageThread.scrollTop = messageThread.scrollHeight;
},0)
这将确保在数据插入DOM之后触发滚动事件。