import React from 'react';
export default class Myscroll extends React.Component {
constructor(props) {
super(props);
this.state = {
codeType:true,
}
}
componentDidMount() {
// 挂载滚动监听
window.addEventListener('scroll', this.bindScroll)
}
componentWillUnmount() {
// 移除滚动监听
window.removeEventListener('scroll', this.bindScroll);
}
render() {
return (
<div></div>
)
}
bindScroll(event) {
// 滚动的高度
const scrollTop = (event.srcElement ? event.srcElement.documentElement.scrollTop : false) || window.pageYOffset || (event.srcElement ? event.srcElement.body.scrollTop : 0);
// 视窗高度
const clientHeight = (event.srcElement && event.srcElement.documentElement.clientHeight) || document.body.clientHeight;
// 页面高度
const scrollHeight = (event.srcElement && event.srcElement.documentElement.scrollHeight) || document.body.scrollHeight;
// 距离页面底部的高度
const height = scrollHeight - scrollTop - clientHeight;
// 判断距离页面底部的高度
if (height <= (this.props.num || 0)) {
// 判断执行回调条件
if (this.state.codeType) {
// 执行回调
this.props.scrollCallback();
// 关闭判断执行开关
this.setState(
{
codeType: false,
}
);
}
} else {
// 打开判断执行开关
this.setState({
codeType: true
});
}
}
}
react 监听页面滚动
最新推荐文章于 2024-05-31 10:08:12 发布