为元素绑定scroll事件的eventListener无效，使用onscroll属性却正常，求排查

核心原因 #

大概率是你的JS代码执行时机不对——在DOM元素完全渲染、滚动容器特性生效前就绑定了事件。

虽然console.log(customInfo)能输出元素对象，但此时浏览器可能还没解析应用overflow-auto样式，元素还不具备滚动容器的属性，导致绑定的scroll事件无法触发；而内联的onscroll属性是随元素本身加载的，等样式生效、元素成为滚动容器后，滚动时就能正常触发。

另外也可以快速确认：custom-info类是否给p元素设置了固定高度/最大高度——如果p元素能自适应内容高度，没有出现滚动条，scroll事件自然不会触发（不过你用内联绑定能触发，这点基本可以排除）。

解决办法 #

• 延迟JS执行时机
  把JS代码放在HTML文档的</body>标签之前，或者用DOMContentLoaded事件包裹，确保DOM完全加载后再绑定事件：

  document.addEventListener('DOMContentLoaded', () => {
    const customInfo = document.querySelector('#customInfo')
    customInfo.addEventListener('scroll', () => {
        console.log('yup');
    })
  })
  

• 确认滚动容器样式生效
  检查custom-info的CSS样式，确保设置了固定高度或最大高度，且overflow属性正确：

  .custom-info {
    max-height: 200px; /* 根据实际需求调整高度 */
    overflow: auto;
  }
  

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