时间戳

首页 > 解决方案 > 为什么不能触发窗口滚动事件

javascript - 为什么不能触发窗口滚动事件

问题描述

我有这个js类：

export class ScrollBehaviorComponent {
  init() {
    const body = document.querySelector('body')
    let previousScroll = window.pageYOffset || 0
    let scrollDirIsUp = false

    window.addEventListener('scroll', function(e) {
      const currentScroll = window.pageYOffset // never gets updated
      scrollDirIsUp = currentScroll > 0 && previousScroll >= currentScroll // never gets updated
      body.classList.toggle('body--scroll-up', scrollDirIsUp) // never gets updated

      alert('scroll is up: ', window.pageYOffset) // never happens
    })

    console.log(window) // I see this log, o_0
  }
}

export default ScrollBehaviorComponent

我之前已经使用过，但是对于这个特定的项目，该事件不会被触发。

我像这样加载它：

import ScrollBehaviorComponent from 'Shared/scroll-behavior/scroll-behavior.component'

export const HomeModule = {
  init() {
    new ScrollBehaviorComponent().init()

    // rest of page's code..
  },
}

问题是即使开发人员的控制台没有触发错误，事件也不会触发。

即使我在开发人员控制台中输入（同样，没有错误）

window.window.addEventListener('scroll', function(e) {
  console.log('scroll is up: ', window.pageYOffset) // never happens
})

当我打字时，它在stackoverflow中被触发。

在此处输入图像描述

可能是什么原因？应用程序中的某处正在停止事件传播？如果是这样，任何线索如何找到它？其他猜测？（它是一个继承的项目）

标签： javascriptwebpackscrollevent-handlingdom-events

解决方案

可能是某些元素（body本身或某些嵌套div的 ）将 cssoverflow属性设置为scroll.

要尝试确定哪个是您可以添加如下内容：

document.querySelectorAll("*").forEach(element => element.addEventListener("scroll", ({target}) => console.log(target, target.id, target.parent, target.parent.id)));

确保在页面完全呈现时运行它；然后在您的控制台中，您应该有足够的数据来识别哪个元素正在滚动。

推荐阅读