加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

react判断滚动到底部以及保持原来的滚动位置

发布时间:2020-12-15 06:52:37 所属栏目:百科 来源:网络整理
导读:这里解决两个问题: * 判断某个组件是否滚动到底部 * 页面切换出去再切换回来后怎样保持之前的滚动位置 要保证这个组件就是那个滚动的组件,overflowY为scroll 判断某个组件是否滚动到底部 组件代码如下,通过ref获取真实的dom节点 div ref ={ node = this .

这里解决两个问题:
* 判断某个组件是否滚动到底部
* 页面切换出去再切换回来后怎样保持之前的滚动位置

要保证这个组件就是那个滚动的组件,overflowY为scroll

判断某个组件是否滚动到底部

  • 组件代码如下,通过ref获取真实的dom节点
<div ref={ node => this.contentNode = node }>
  • 在组件加载完成后增加监听scroll事件,组件将要卸载的时候移除事件,onScrollHandle里面就可以判断是否滚动到了底部
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放在类外面作为全局变量

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读