Question

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

window.addEventListener什么都不做
onScroll无效
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;会使滚动条返回以及事件发生。

窗口滚动事件已停止在整个域

1 个答案: