scrolltop最底部_奇怪的 scrollTop 赋值不成功,另起炉灶

上一次记得记录了一下 关于 vue 移动端聊天框,如何将滚动条自动置底的问题,可以当我使用的时候却各种碰到问题,比如下面的代码,在组件中,似乎是不起作用,经过我的验证,但是不知道为什么会赋值不成功呢?还有待研究

上一篇文章如下

前端工程师:如何让移动端聊天框的滚动条自动置底​zhuanlan.zhihu.com
zhihu-card-default.svg
document.documentElement.scrollTop = document.documentElement.scrollHeight
// 在组件中好像赋值不成功,不知为何

我的解决方案如下:

30c05ef39afe790dedf05474670fb61e.png

在聊天数据updated 到 DOM 的时候,将滚动条置底

d45cc4b9e518b0c1396d02cc757b90f9.png

当然在初始化的时候,我们也需要给他置底一下

f68caf607e2ee574f68c4d02f3863bad.png

当我看到这篇文章的时候,我惊到了,滚动条竟然可以这样使用,现在就来看看

浏览器的一些“滚动”行为鉴赏 - 掘金​juejin.im

如何设置全局滚动条高度

  1. 最常用的方法:
 window.scrollTo(0, 0);  // or window.scrollTo({   left: 0,   top: 100 });  复制代码
  1. 也可以利用相对滚动设置:
 window.scrollBy(0, 0);  // or window.scrollBy({   left: 0,   top: 100 }); 复制代码
  1. 或者利用scrollTop设置:
 document.sc
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值