我正在使用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');
}
});
其他回答
如果你不想依赖scrollHeight,下面的代码可以帮助你:
$('#scroll').scrollTop(1000000);
更新的方法,适用于所有当前浏览器:
this.scrollIntoView(false);
滚动到div内的最后一个元素:
myDiv.scrollTop = myDiv.lastChild.offsetTop
为什么不使用简单的CSS来做到这一点呢?
诀窍是使用display: flex;和弯曲方向:列反向;
Here is a working example. https://codepen.io/jimbol/pen/YVJzBg
试试下面的代码:
const scrollToBottom = (id) => {
const element = document.getElementById(id);
element.scrollTop = element.scrollHeight;
}
你也可以使用Jquery使滚动平滑:
const scrollSmoothlyToBottom = (id) => {
const element = $(`#${id}`);
element.animate({
scrollTop: element.prop("scrollHeight")
}, 500);
}
下面是演示
下面是它的工作原理:
参考:scrollTop, scrollHeight, clientHeight