当我们打开一个聊天页面,希望的是展示最新的聊天内容,因此就有了固定聊天滚动条在底部的需求,这样我们进来就会看得到最新的消息。
具体实现:
使用ref属性
首先在需要固定滚动条的区域元素上使用ref属性来获取实例对象
- <div className="chat-message" ref={(el) => { this.messagesBottom = el }}></div>
写方法
- scrollToBottom(){
- if (this.messagesBottom) {
- const scrollHeight = this.messagesBottom.scrollHeight;//实例div的实际高度
- const height = this.messagesBottom.clientHeight; //实例可见区域高度
- const maxScrollTop = scrollHeight - height;
- this.messagesBottom.scrollTop = maxScrollTop > 0 ? maxScrollTop : 0;
- }
- }
最后
react生命周期钩子函数调用
完。
微信小程序
互联网开发,终身学习者,欢迎您的关注!