这里解决两个问题:
* 判断某个组件是否滚动到底部
* 页面切换出去再切换回来后怎样保持之前的滚动位置
要保证这个组件就是那个滚动的组件,overflowY为scroll
判断某个组件是否滚动到底部
- <div ref={ node => this.contentNode = node }>
- onScrollHandle(event) {
- const clientHeight = event.target.clientHeight
- const scrollHeight = event.target.scrollHeight
- const scrollTop = event.target.scrollTop
- const isBottom = (clientHeight + scrollTop === scrollHeight)
- console.log('is bottom:' + isBottom)
- }
-
- componentDidMount() {
- if (this.contentNode) {
- this.contentNode.addEventListener('scroll',this.onScrollHandle.bind(this));
- }
- }
-
- componentWillUnmount() {
- if (this.contentNode) {
- this.contentNode.removeEventListener('scroll',this.onScrollHandle.bind(this));
- }
- }
页面切换出去再切换回来后怎样保持之前的滚动位置
- 当页面切换出去的时候会调用componentWillUnmount方法,所以在这里记录下当前组件位置
- 当页面切换进来的时候会调用componentDidMount方法,将之前保存的位置重新赋值给组件
代码如下:
- let scrollTop = 0
- onScrollHandle(event) {
- const clientHeight = event.target.clientHeight
- const scrollHeight = event.target.scrollHeight
- const scrollTop = event.target.scrollTop
- const isBottom = (clientHeight + scrollTop === scrollHeight)
- if (this.state.isScrollBottom !== isBottom) {
- this.setState({
- isScrollBottom: isBottom
- })
- }
- }
-
- componentDidMount() {
- if (this.contentNode) {
- this.contentNode.addEventListener('scroll',this.onScrollHandle.bind(this));
- this.contentNode.scrollTop = scrollTop
- }
- }
-
- componentWillUnmount() {
- if (this.contentNode) {
- this.contentNode.removeEventListener('scroll',this.onScrollHandle.bind(this));
- scrollTop = this.contentNode.scrollTop
- }
- }
scrollTop放在类外面作为全局变量