1. 程式人生 > >ReactJs 新增和刪除onScroll事件。

ReactJs 新增和刪除onScroll事件。

  • 大家都可能會遇到這樣的問題,那就是滾動事件 。比較獲取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='' }