在子组件中如何获取父组件的scrollTop
时间: 2023-08-18 14:40:55 浏览: 89
document.body.scrollTop用法
要在子组件中获取父组件的scrollTop,需要使用props向子组件传递父组件的scrollTop属性。具体地,可以在父组件中使用ref获取父组件的DOM节点,然后将scrollTop属性以props的形式传递给子组件。子组件中通过props获取父组件的scrollTop属性即可。
示例代码如下:
```jsx
// 父组件
import React, { Component } from 'react';
class Parent extends Component {
constructor(props) {
super(props);
this.myRef = React.createRef();
}
render() {
return (
<div ref={this.myRef} onScroll={this.handleScroll}>
<Child scrollTop={this.myRef.current.scrollTop} />
// 将scrollTop属性以props的形式传递给子组件
</div>
);
}
handleScroll = () => {
console.log(this.myRef.current.scrollTop);
}
}
// 子组件
import React, { Component } from 'react';
class Child extends Component {
render() {
return (
<div>{this.props.scrollTop}</div>
// 通过props获取父组件的scrollTop属性
);
}
}
```
阅读全文