文章标题 原创 翻译 转载 文章内容 这里解决两个问题: * 判断某个组件是否滚动到底部 * 页面切换出去再切换回来后怎样保持之前的滚动位置 > 要保证这个组件就是那个滚动的组件,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放在类外面作为全局变量 文章类别 Python Mobile Android Java Shell Life Database Bug Windows IOS Tools Boost Node.js Mac Product Tips C/C++ Golang Javascript React Qt MQ MongoDB Design Web Linux LLM ChatGPT RAG AI 提交