react 中为什么触发不了 onScroll事件？

Question

官方文档里讲了一个事件 就是 UI事件 onScroll
但是 实际在代码中去监听不到
onScroll={ e => { this.handleScroll(e) } } hanleScroll中我设置了打印1 并不能打印
难道只能在 componentDidMount hook里去监听window scroll事件？
奇怪的是我第一次用react做项目的时候用了hashrouter 在 componentDidMount 里监听
window scroll 事件都不可以 window.scrollTo 事件也不生效

大家有遇到类似的问题吗 分享一下

Answer 1

这是之前写的返回顶部的组件，就是在 componentDidMount 里监听 window scroll 事件。
https://github.com/BaoXuebin/xdbin-react-app/blob/master/src/app/components/BackTop.jsx

这里分享一个之前遇到的坑吧。因为返回顶部这个组件基本每个页面都会用到，而一个页面里对 window scroll 事件的处理有可能不止一个。如果每个组件里都写如下代码：

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

则肯定会覆盖原有的 window.onscroll 方法。所以正确的处理应该是延续 onscroll 事件的冒泡执行。

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