我正在使用Ajax请求创建聊天,我试图让消息div滚动到底部没有太多运气。
我将所有内容都包装在这个div中:
#scroll {
height:400px;
overflow:scroll;
}
是否有一种方法来保持它滚动到底部默认使用JS?
有办法保持它滚动到ajax请求后的底部吗?
我正在使用Ajax请求创建聊天,我试图让消息div滚动到底部没有太多运气。
我将所有内容都包装在这个div中:
#scroll {
height:400px;
overflow:scroll;
}
是否有一种方法来保持它滚动到底部默认使用JS?
有办法保持它滚动到ajax请求后的底部吗?
当前回答
var mydiv = $("#scroll");
mydiv.scrollTop(mydiv.prop("scrollHeight"));
来自jQuery 1.6的工作
https://api.jquery.com/scrollTop/
http://api.jquery.com/prop/
其他回答
使用jQuery, scrollTop用于为任何给定元素设置scollbar的垂直位置。还有一个漂亮的jquery scrollTo插件,用于滚动动画和不同的选项(演示)
var myDiv = $("#div_id").get(0);
myDiv.scrollTop = myDiv.scrollHeight;
如果你想使用jQuery的animate方法在向下滚动时添加动画,请检查下面的代码片段:
var myDiv = $("#div_id").get(0);
myDiv.animate({
scrollTop: myDiv.scrollHeight
}, 500);
平滑滚动Javascript:
. getelementbyid(“信息”)。scrollIntoView({behavior: 'smooth', block: 'end'});
只是作为一个额外的片段。我正在使用angular,并试图在用户选择与用户的不同对话时将消息线程滚动到底部。为了确保在使用ng-repeat for消息将新数据加载到div之后滚动仍然有效,只需在超时时间内包装滚动片段。
$timeout(function(){
var messageThread = document.getElementById('message-thread-div-id');
messageThread.scrollTop = messageThread.scrollHeight;
},0)
这将确保在数据插入DOM之后触发滚动事件。
将到可滚动元素顶部的距离设置为元素的总高度。
const element = this.shadowRoot.getElementById('my-scrollable-div')
element.scrollTop = element.scrollHeight
使用:
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');
}
});