vue3滚动条scroll监听事件无效和scrollTop一直为0的问题

滚动条监听事件无效

如果你已经尝试过很多种方法，可以直接跳转结论查看可能有用的方法，虽然过程有些不清不楚的

问题的背景

整体的组件框架如下，使用了​ ​<el-container>​ （滚动条位置为0的坑可能就是这个导致的）

<div>
	<!-- 注意这里的el-container -->
	<el-container>
		<el-main/>
		....其他组件
	</el-container>
<div>

然后el-main组件中就是主要页面的组件，也是当前我想添加滚动条监听的页面

<div>
	<div>标题</div>
	<!-- 下面是elplus的无限滚动组件 -->
	<el-Infinite-Scroll/>
</div>
<script>
	//在此处添加页面的监听事件
</script>

问题的发生：

当前页面是有滚动条的，我想在当前页面添加一个滚动条的监听，然后发现监听事件都不能触发， 当我滚动的页面的时候没有滚动事件，搜过其他的方法，包括使用window.addEventListener()并填写该方法的第三个参数，重启服务，而其他的例如click事件没有问题。问了很多人和Ai都没能解决，滚动事件根本就不触发。

问题的原因：

滚动事件不触发的原因是因为滚动条属于父组件 而不是你当前的页面。我在main组件中监听滚动条滚动是无效的，因为当前滚动条是属于上一层的<el-main/>，也就是父组件。(但奇怪的是，可能是因为我中途去吃饭，顺手把电脑睡眠了一下，印象中后面再次编写的时候，回到子组件好像也能监听到了，不清楚，很玄学）

新的问题：scrollTop的位置一直为0

滚动条的位置输出一直为0，这个问题也是尝试了半天，使用下面的兼容语句取值也没用，一直输出为0

const scrollY = document.documentElement.scrollTop || document.body.scrollTop || window.pageYOffset;

弄了半天，最后把代码重写了一下发现是​ ​<el-container>​​导致的， 不要使用这个组件，你猜怎么着，好了。可以输出正确的位置了。

---

结论

滚动监听事件不生效

有几种可能的原因，我建议一个个来尝试，其他答案基本也是这些了

1. addEventListener不止有两个参数。尝试输入第三个参数为true
   

2. 你这个页面的滚动条是属于你当前的组件，还是属于父组件的，如果属于父组件，那当然子组件不会触发滚动事件

   参考文章（这两个建议都看看）：csdn,掘图

   

3. 检查你的父组件以及当前的组件的css样式中的overflow属性是否为auto，有人说添加这个才能监听，有人说添加了就不能监听

   添加监听的文章：segmentfault.com/q/1010000009119633

4. 是否使用了elementPlus等UI组件（例如el-container，有可能是组件内部的样式问题，不使用封装的组件能否触发滚动事件？能，组件的问题，不能，请参考2）

5. 关软件重开，关机重启（烧香，烧香是假的，重启是真的）

scrollTop==0?

1. 可能是浏览器兼容的问题，使用这个语句来获取位置

   const scrollY = document.documentElement.scrollTop || document.body.scrollTop || window.pageYOffset;

2. 是否使用了elementPlus等UI组件，例如el-container，有可能是组件内部的样式问题，不使用封装的组件能否触发滚动事件？能：组件的问题，不能：参考3

3. 继续搜吧，或请教大牛，亦或是重写吧，

   参考文章（这两个建议都看看）：csdn,掘图