用window.scrollY获取元素ID的滚动位置
用window.scrollY获取元素ID的滚动位置
提问于 2018-03-29 19:46:07
我的React应用程序已经将overflow: hidden应用到了body上，原因是它发生了变形。这就产生了无法注册scrollY滚动位置的问题，因为滚动发生在子组件中。
如何应用window.scrollY或类似的方法来注册<div id="innerContainer">的滚动位置
下面是一个scroll addEventListener在滚动中创建类的片段。问题是如果不注册scrollY，我就不能添加事件。
componentDidMount () {
window.addEventListener('scroll', this.handleHeaderStuck);
}
componentWillUnmount () {
window.removeEventListener('scroll', this.handleHeaderStuck);
} 或
handleHeaderStuck() {
console.log('scrollPos', window.scrollY)
if (window.scrollY === 0 && this.state.isStuck === true) {
this.setState({isStuck: false});
}
else if (window.scrollY !== 0 && this.state.isStuck !== true) {
this.setState({isStuck: true});
}
}以及is的总体布局..。
render() {
return (
<main className={this.state.isStuck ? 'header-stuck' : ''}>
<div id="container">
<header />
<div id="innerContainer">...</div>
<footer />
</div>
</main>更新-在应用Kingdaro提交的答案之后
使用Kingdaro提交的代码注册scrollPos更改而不是实际位置的控制台屏幕截图
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-03-29 19:56:25
参考应该在这里完成这项工作。还请确保在组件卸载时注销事件侦听器，以避免内存泄漏。
class Example extends React.Component {
innerContainer = null
componentDidMount() {
this.innerContainer.addEventListener("scroll", this.handleHeaderStuck)
}
componentWillUnmount() {
this.innerContainer.removeEventListener("scroll", this.handleHeaderStuck)
}
// using a class property here so the `this` context remains properly bound
handleHeaderStuck = () => {
console.log('div scroll position:', this.innerContainer.scrollTop)
}
render() {
return <div id="innerContainer" ref={el => (this.innerContainer = el)} />
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/49563924
复制相关文章
相似问题
腾讯云开发者
