标签:java top his def 可见 onclick ott rom cli
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: 代表在有滚动条时,滚动条向下滚动的距离也就是元素顶部被遮住部分的高度。
scrollTop
属性设置为两个div的高度差,效果也就是滚动到div的底部了。标签:java top his def 可见 onclick ott rom cli
原文地址:https://www.cnblogs.com/taxun/p/13346699.html