上一次记得记录了一下 关于 vue 移动端聊天框,如何将滚动条自动置底的问题,可以当我使用的时候却各种碰到问题,比如下面的代码,在组件中,似乎是不起作用,经过我的验证,但是不知道为什么会赋值不成功呢?还有待研究
上一篇文章如下
前端工程师:如何让移动端聊天框的滚动条自动置底zhuanlan.zhihu.comdocument.documentElement.scrollTop = document.documentElement.scrollHeight
// 在组件中好像赋值不成功,不知为何
我的解决方案如下:
![30c05ef39afe790dedf05474670fb61e.png](https://i-blog.csdnimg.cn/blog_migrate/09b681cf20352e3f6e1a968698842103.png)
在聊天数据updated 到 DOM 的时候,将滚动条置底
![d45cc4b9e518b0c1396d02cc757b90f9.png](https://i-blog.csdnimg.cn/blog_migrate/198f45c59ba59a3fe945257a0abd1fd4.jpeg)
当然在初始化的时候,我们也需要给他置底一下
![f68caf607e2ee574f68c4d02f3863bad.png](https://i-blog.csdnimg.cn/blog_migrate/b02a85e3beb7845e269ab4cdc35f074a.jpeg)
当我看到这篇文章的时候,我惊到了,滚动条竟然可以这样使用,现在就来看看
浏览器的一些“滚动”行为鉴赏 - 掘金juejin.im如何设置全局滚动条高度
- 最常用的方法:
window.scrollTo(0, 0); // or window.scrollTo({ left: 0, top: 100 }); 复制代码
- 也可以利用
相对滚动
设置:
window.scrollBy(0, 0); // or window.scrollBy({ left: 0, top: 100 }); 复制代码
- 或者利用
scrollTop
设置:
document.sc