React定位到滚动条底部
Posted taxun
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了React定位到滚动条底部相关的知识,希望对你有一定的参考价值。
import React,{Component } from ‘react‘ import ‘./App.css‘; class App extends Component{ scrollToBottom() { if (this.messagesEnd) { const scrollHeight = this.messagesEnd.scrollHeight;//里面div的实际高度 2000px const height = this.messagesEnd.clientHeight; //网页可见高度 200px const maxScrollTop = scrollHeight - height; this.messagesEnd.scrollTop = maxScrollTop > 0 ? maxScrollTop : 0; //如果实际高度大于可见高度,说明是有滚动条的,则直接把网页被卷去的高度设置为两个div的高度差,实际效果就是滚动到底部了。 } } render(){ return ( <div className="App"> <button onClick={this.scrollToBottom.bind(this)}>点击这里跳转到底部</button> <div className=‘content‘ ref={(el) => { this.messagesEnd = el; }}> <div className=‘content-message‘></div> </div> </div> ); } } export default App;
.content{ height:200px; background-Color:#8a8a8a; width:500px; margin:0 auto; overflow-Y:scroll } .content-message{ height:2000px; background-Color:#8a8b8c; margin:0 auto }
scrollTop: 代表在有滚动条时,滚动条向下滚动的距离也就是元素顶部被遮住部分的高度。
react里面显示的是虚拟的dom,所以先用ref获取到当前的dom节点,接下来的思路就是,先判断有没有滚动条,也就是里面div的高度是否超过外面div的高度,如果没有超过,那就不用管嘛,一个页面就显示完了,当然也就不需要滚动,如果里面的div高度比较高,外面的div出现滚动条了,则直接把div的
转载 https://www.jianshu.com/p/bd6f3e868a18scrollTop
属性设置为两个div的高度差,效果也就是滚动到div的底部了。以上是关于React定位到滚动条底部的主要内容,如果未能解决你的问题,请参考以下文章