鍍金池/ 問(wèn)答/HTML/ react 中為什么觸發(fā)不了 onScroll事件？

react 中為什么觸發(fā)不了 onScroll事件？

官方文檔里講了一個(gè)事件 就是 UI事件 onScroll
但是 實(shí)際在代碼中去監(jiān)聽不到
onScroll={ e => { this.handleScroll(e) } } hanleScroll中我設(shè)置了打印1 并不能打印
難道只能在 componentDidMount hook里去監(jiān)聽window scroll事件？
奇怪的是我第一次用react做項(xiàng)目的時(shí)候用了hashrouter 在 componentDidMount 里監(jiān)聽
window scroll 事件都不可以 window.scrollTo 事件也不生效

大家有遇到類似的問(wèn)題嗎 分享一下

回答
編輯回答
默念

這是之前寫的返回頂部的組件，就是在 componentDidMount 里監(jiān)聽 window scroll 事件。
https://github.com/BaoXuebin/xdbin-react-app/blob/master/src/app/components/BackTop.jsx

這里分享一個(gè)之前遇到的坑吧。因?yàn)榉祷仨敳窟@個(gè)組件基本每個(gè)頁(yè)面都會(huì)用到，而一個(gè)頁(yè)面里對(duì) window scroll 事件的處理有可能不止一個(gè)。如果每個(gè)組件里都寫如下代碼：

componentDidMount() {
    window.onscroll = () => {
        // ...
    };
}

則肯定會(huì)覆蓋原有的 window.onscroll 方法。所以正確的處理應(yīng)該是延續(xù) onscroll 事件的冒泡執(zhí)行。

componentDidMount() {
    window.onscroll = () => {
        if (window.onscroll) {
            window.onscroll();
        }
        // ...
    };
}
2018年8月3日 15:07