react中聊天窗口滚动条固定在底部

2019年11月5日21:48:38 发表评论 阅读(2,524)
本文最后更新于2019年11月5日,已超过一年没有更新,如果文章内容或图片资源失效,请留言反馈,我们会及时处理,谢谢!

当我们打开一个聊天页面,希望的是展示最新的聊天内容,因此就有了固定聊天滚动条在底部的需求,这样我们进来就会看得到最新的消息。

react中聊天窗口滚动条固定在底部

具体实现:

使用ref属性

首先在需要固定滚动条的区域元素上使用ref属性来获取实例对象

  1. <div className="chat-message" ref={(el) => { this.messagesBottom = el }}></div>

 写方法

  1. scrollToBottom(){
  2.     if (this.messagesBottom) {
  3.         const scrollHeight = this.messagesBottom.scrollHeight;//实例div的实际高度
  4.         const height = this.messagesBottom.clientHeight;  //实例可见区域高度
  5.         const maxScrollTop = scrollHeight - height;
  6.         this.messagesBottom.scrollTop = maxScrollTop > 0 ? maxScrollTop : 0;
  7.         }
  8.     }

最后

react生命周期钩子函数调用

 

完。

 

weinxin
微信小程序
互联网开发,终身学习者,欢迎您的关注!
舍得

发表评论

不高兴 彩虹 吃瓜 丢翔 乖 滑稽 花心 惊哭 惊讶 挤眼 酷 伤心 帅吗? 礼物 玫瑰 怒 生气 喷 睡觉 太开心 小九九 啊
太阳 吐舌 委屈 笑眼 星星月亮 心碎 咦 阴险 疑问 真棒 偷笑 斜眼笑 震惊 略 哈欠 无奈哭 抠鼻 哼 期待 懒得理你 爱心 蜡烛