版权声明:crystalLee https://blog.csdn.net/baidu_33591715/article/details/83116304
直接拿一个页面过来说问题,好桑心获取节点困了好久,然而只想简简单单用这篇文章来记录滚动条滚到底部触发事件
@inject('blogAttentionStore')
@observer
export default class ShareToMe extends React.Component {
constructor(props) {
super(props);
let {parentHeight} = props;
this.state={
shareList:[],
parentHeight:parentHeight,
}
}
// 高度计算
listHeight = () => {
let parentHeight = this.state.parentHeight;
let tabHeight = document.getElementsByClassName('am-tabs-tab-bar-wrap')[0].offsetHeight,
searchHeight = document.getElementsByClassName('am-search')[0].offsetHeight;
parentHeight = parentHeight - tabHeight - searchHeight;
return parentHeight;
}
dropDown = () => {
/* console.log('滚动的高度',this.refs.list.scrollTop)
console.log('窗口的高度',this.refs.list.offsetHeight)
console.log('文档的高度',document.getElementsByClassName('blog-shareToMe-list')[0].offsetHeight) */
let documentHeight = document.getElementsByClassName('blog-shareToMe-list')[0].offsetHeight,
scrollHeight = this.refs.list.scrollTop,
divHeight = this.refs.list.offsetHeight;
if(documentHeight-scrollHeight<=divHeight) {
console.log('1');
}
}
render() {
const { blogAttentionStore: { shareList } } = this.props;
return (
<div className='blog-blogAttention-shareToMe'>
<SearchBar
className = 'blog-blogAttention-shareToMe-searchBar'
placeholder = {getLabel(32933,'请输入关键字')}
/>
<div ref='list' style={{height:this.listHeight(), overflow:'auto'}} onScroll={this.dropDown}>
<Item className='blog-shareToMe-list' attentionList={ shareList }/>
</div>
</div>
)
}
}