react判断滚动到底部以及保持原来的滚动位置
发布时间:2020-12-15 06:52:37 所属栏目:百科 来源:网络整理
导读:这里解决两个问题: * 判断某个组件是否滚动到底部 * 页面切换出去再切换回来后怎样保持之前的滚动位置 要保证这个组件就是那个滚动的组件,overflowY为scroll 判断某个组件是否滚动到底部 组件代码如下,通过ref获取真实的dom节点 div ref ={ node = this .
这里解决两个问题:
判断某个组件是否滚动到底部
<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));
}
}
页面切换出去再切换回来后怎样保持之前的滚动位置
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
}
}
(编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |