監聽滾動條到底部事件響應
阿新 • • 發佈:2018-12-11
直接拿一個頁面過來說問題,好桑心獲取節點困了好久,然而只想簡簡單單用這篇文章來記錄滾動條滾到底部觸發事件
@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> ) } }