ReactJs 新增和刪除onScroll事件。
阿新 • • 發佈:2018-12-31
大家都可能會遇到這樣的問題,那就是滾動事件 。比較獲取div的滾動事件,在ReactJS想要給div新增一個滾動事件,那基本上是新增不上的(可能是我的能力有限吧,反正我到目前為止,還沒有找到可以直接給DIV新增滾動事件的)。
要想實現滾動,那就必須得componentWillMount裡註冊scroll事件, window.addEventListener(‘scroll’, this.onScroll.bind(this)),新增事件非常容易的就新增上了。
在componentWillUnmount 裡刪除 window.removeEventListener(‘scroll’, this.onScroll.bind(this)) 。
新增容易,刪除難,上面那種 remove是刪除不了的。在其它頁面裡,如果你滾動也會觸發 onScroll裡的事件,此時就會報錯,說元件已經解除安裝,不能進行操作,檢查一下程式碼等等吧。
我想肯定有遇到了,也有解決的辦法,果真找到了一篇文章移除 scroll 辦法的。文章標題是: 非常感謝這位提供的辦法。
程式碼如下:
componentDidMount() {
regScroll(this.handler.bind(this));
//window.addEventListener('scroll', this.handler.bind(this),false)
}
componentWillUnmount() {
window .onscroll = '';
//window.removeEventListener('scroll', this.handler.bind(this),false)
}
//新增事件監聽
function regScroll(myHandler) {
if (window.onscroll === null) {
window.onscroll = myHandler
} else if (typeof window.onscroll === 'function') {
var oldHandler = window.onscroll;
window .onscroll = function () {
myHandler();
oldHandler();
}
}
}
//刪除所有事件監聽
function removeScrollHandler(){
window.onscroll=''
}