窗口滚动事件已停止在整个域中的所有实现上触发

Question

这是一个奇怪的问题，我希望能找到一些见解。我的个人页面上有许多滚动侦听器。导航栏在滚动时隐藏和取消隐藏，图像被延迟加载等。我听整个域的滚动。我只是注意到当我在子页面上放置一个新的滚动侦听器时，它们都停止工作了。我无法触发任何滚动事件：

• window.addEventListener 什么也没做
• onScroll 附加到 div 什么都不做
• react-lazyload 什么也没做
• react-event-listener 什么也没做

基本滚动侦听器实现：

constructor() {
    super()

    this.handleScroll = this.handleScroll.bind(this)
    this.setColorsForState = this.setColorsForState.bind(this)
}

componentWillMount() {
    window.addEventListener('scroll', _.throttle(this.handleScroll, 150))
}

componentWillUnmount() {
    window.removeListener('scroll', _.throttle(this.handleScroll, 150))
}


handleScroll(event) {
   console.log('scrolling')
}

几个月来它运行良好。

这不是特定于浏览器的，它不会在任何浏览器中触发。

听的听众resize 做工作。

到底是什么阻止了一个事件在整个域中触发？关于从哪里开始的任何建议都会有很大帮助。我已经回去并开始删除最近添加的内容，以查看问题可能出在哪里，但还没有任何效果。提前致谢！

Answer 1

我想我找到了原因。

你的 body/html 标签上有这个 css 规则：

body, html {
  overflow-x: hidden;
}

猜猜这是为了隐藏默认滚动条并使用您自己的滚动条。当您在浏览器中取消选中它时，滚动事件将恢复生机。

还请注意，取消选中此规则height: 100%!important;会返回滚动条和事件。