最近改造一个移动端类似聊天室的留言板项目,将PHP的项目改为NODE,走的是HTTP协议没有使用socket协议。需求是:发送完消息后需要滚动页面最底部。但是无论我怎么设置dom元素的scrollTop它就是不动,最后在同事一眼就看出来是因为这个dom元素的高度没有固定,故而在此总结一下。
css:
.flow {
position: relative;
padding-top: 50px;
overflow-y: auto;
box-sizing: border-box;
padding-bottom: 57px;
-webkit-overflow-scrolling: touch;
height: 98vh; // 很重要,之前写的是min-height
}
js:
// 自动滚动到页面底部
this.$flow = document.querySelector('.flow'); // 获取需要滚动元素
this.$nextTick(() => {
this.$flow.scrollTop = this.$flow.scrollHeight;
})
还需要监听滚动到页面顶部加载更多历史消息:
// 监听对应dom 的scroll事件
watchScroll () {
let _this = this
this.$nextTick(() => {
setTimeout(() => {
//这里要看情况,不能对window添加scroll监听事件,否则无法生效
_this.$flow.addEventListener('scroll', _this.handleScroll, true); // 监听(绑定)滚轮滚动事件
}, 1000)
});
},
// 滚动到顶部加载更多
handleScroll () {
if (this.$flow.scrollTop === 0 && this.allowScrollTop) { // 表明已经滚到最上面
this.isInLoadMore = true;
this.ajaxGetChatMsgList(this.chatMsgList[0].id)
}
},