为什么不能触发窗口滚动事件
Ton*_*bet 5 javascript scroll event-handling dom-events webpack
我有这个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 中触发的。
这可能是什么原因？应用程序中的某处正在停止事件传播？如果是这样，任何线索如何找到它？其他猜测？（它是一个继承的项目）
可能是某些元素（body本身或某些嵌套的div）将 cssoverflow属性设置为scroll。
要尝试确定哪个是您可以添加以下内容：
document.querySelectorAll("*").forEach(element => element.addEventListener("scroll", ({target}) => console.log(target, target.id, target.parent, target.parent.id)));
确保在页面完全呈现时运行它；那么在你的控制台中你应该有足够的数据来识别哪个元素正在滚动。
不能window在不发出事件的情况下滚动scroll。您可以通过单击开发人员工具中的元素来验证某些第三方代码是否未删除事件侦听器<!DOCTYPE html>（您也可以运行getEventListeners(window).scroll）：
如果您看到事件侦听器，那么在您的应用程序中您实际上正在滚动另一个元素：
全页窗口滚动示例：
window.addEventListener('scroll', function() {
console.log('Scroll event');
});#big-content {
height: 1000px;
}<div id="big-content">
</div>您可能认为自己正在滚动窗口但实际上正在滚动整页底层元素的示例：
window.addEventListener('scroll', function(e) {
console.log('Underlying element scroll event bubbled'); // never happens
});
document.getElementById('container').addEventListener('scroll', function({ bubbles }) {
console.log('Will bubble: ', bubbles);
});#container {
position: fixed;
height: 100vh;
width: 100vw;
overflow: scroll;
}
#big-content {
height: 1000px;
}<div id="container">
<div id="big-content">
</div>
</div>在这种情况下，事件不会冒泡，并且您无法在window级别上收听它。
| 归档时间： |
|
| 查看次数： |
1450 次 |
| 最近记录： |