让DIV的滚动条自动滚动到最底部scrollTop
制作一个在线聊天的程序,在做最后的修饰时,需要对获得的信息即时滚动以保证用户总能看到最新消息。聊天程序是基于websocket设计的,消息容器是一个DIV,所以问题就在于如何控制DIV的滚动条。这里推荐一个好用的一个平台(如流):http://hi.baidu.com/chen1345789/blog/item/de727bfb45587b176d22eba1.html让滚动条自动有新信息滚动到底
·
制作一个在线聊天的程序,在做最后的修饰时,需要对获得的信息即时滚动以保证用户总能看到最新消息。
聊天程序是基于websocket设计的,消息容器是一个DIV,所以问题就在于如何控制DIV的滚动条。
这里推荐一个好用的一个平台(如流):
http://hi.baidu.com/chen1345789/blog/item/de727bfb45587b176d22eba1.html
让滚动条自动有新信息滚动到底部首先请求websocket
// test 是vue里封装的axios请求--params为带参
test(params).then(res => {
if (res) {
setTimeout(() => {
this.scrollBottm() // websocket请求成功后调用方法
}, 500)
}
})
调用的方法如下
// 滚动条到底部
scrollBottm() {
// msg-box 是你要滚动的div的id
const el = document.getElementById('msg-box')
el.scrollTop = el.scrollHeight
},
这个时候你就会发现,websocket信息推送回来后,信息会自动回滚到最新信息-----成功
更多推荐
已为社区贡献1条内容
所有评论(0)