Laravel中滚动切换图片的Scroll函数未执行问题排查请求

问题分析 #

从你的代码来看，DOMContentLoaded能正常执行（外部console.log有输出），但window的scroll事件完全不触发，核心可能是以下几个原因：

• 滚动容器不是window：如果页面里有某个容器设置了overflow: scroll/auto且高度有限，实际滚动行为发生在这个容器上而非window，绑定在window上的scroll事件自然不会触发。
• 事件监听被覆盖/移除：项目中其他JS代码可能移除了window的scroll事件监听，或者用addEventListener绑定了同名事件但设置了once: true，导致你的监听失效。
• 页面无滚动空间：虽然你设置了body{height:200vh;}，但如果父元素（比如html）设置了overflow:hidden，页面依然无法滚动，scroll事件也就不会触发。

修复步骤 #

1. 确认滚动容器

打开浏览器开发者工具（F12），在Elements面板选中<html>或<body>，查看右侧Styles面板的overflow属性。如果发现是某个内部容器（比如.container）在滚动，把scroll事件绑定到该容器上：

// 假设滚动容器是id为scroll-container的元素
var scrollContainer = document.getElementById('scroll-container');
scrollContainer.addEventListener('scroll', function() {
  console.log('oi');
  // 用scrollContainer.scrollTop代替window.scrollY
  if (scrollContainer.scrollTop >= 10) {
      imagemElement.src = novaImagem;
  } else {
      imagemElement.src = imagemInicial;
  }
});

2. 检查事件监听是否存在

在开发者工具的Elements面板，选中<window>（顶部下拉菜单），到右侧Event Listeners面板查看scroll事件下是否有你的回调函数。如果没有，说明监听没绑定成功，排查是否有其他代码干扰。

3. 修复逻辑漏洞

原代码中else if (window.scrollY < 2)会导致scrollY在2-9之间时，图片不会切换回初始状态，改成else即可覆盖所有小于10的情况：

window.addEventListener('scroll', function() {
  console.log('oi');
  if (window.scrollY >= 10) {
      imagemElement.src = novaImagem;
  } else {
      imagemElement.src = imagemInicial;
  }
});

4. 验证图片路径正确性

虽然这不是事件不触发的原因，但要确保Laravel的asset()生成的路径正确：查看页面源码，确认novaImagem和imagemInicial的值是有效的图片URL，避免切换后图片显示异常。

额外测试 #

可以先写一个最简测试代码排除其他干扰：

document.addEventListener('DOMContentLoaded', function() {
  window.addEventListener('scroll', function() {
    console.log('scroll触发了！', window.scrollY);
  });
});

如果这个最简代码能正常输出，说明是原代码中的其他逻辑或外部代码干扰，逐步排查即可。

内容的提问来源于stack exchange，提问作者Rafael Bortoti