为指定类/ID的Div添加scroll事件监听失效问题求助

看起来你在监听自定义滚动容器的滚动行为时遇到了卡壳，我帮你梳理下代码里的几个关键问题，修正后就能正常输出滚动值啦：

1. 类名选择器的语法错误 #

document.getElementsByClassName() 方法接收的是类名本身，不需要加前面的.（这是CSS选择器专属语法，和querySelector的规则不一样）。你写成.site-content会直接找不到对应元素，自然没法绑定滚动事件。

2. HTMLCollection 无法直接绑定事件 #

getElementsByClassName() 返回的是一个HTMLCollection（元素集合）——哪怕页面只有一个匹配元素，它也是集合类型，不能直接调用addEventListener。你需要通过索引（比如[0]）取出具体的元素后再绑定事件。

3. 元素滚动距离的属性错误 #

scrollY是window对象的专属属性，用来获取整个页面的垂直滚动距离。对于自定义滚动容器，你应该用scrollTop属性来获取元素自身的垂直滚动距离。另外因为你的元素做了旋转变换，实际滚动方向可能和视觉方向相反，但先解决基础的监听输出问题~

修正后的完整代码 #

// 先获取正确的滚动容器元素
const siteContent = document.getElementsByClassName('site-content')[0];
// 给单个元素绑定滚动事件
siteContent.addEventListener('scroll', () => {
  // 获取元素自身的滚动距离
  const scrolled = siteContent.scrollTop;
  console.log(scrolled);
});

或者更推荐用querySelector，语法更直观，直接返回单个匹配元素：

const siteContent = document.querySelector('.site-content');
siteContent.addEventListener('scroll', () => {
  const scrolled = siteContent.scrollTop;
  console.log(scrolled);
});

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