VUE3+TS+ElementUI项目中监测页面滚动scroll事件以及滚动高度不生效问题的解决方案(window.addEventListener)

qiqiliuwu2026-01-16 9:26

原生js中我们通常用window.addEventListener来对页面的scroll滚动事件进行监控，并依次来进行一些后续操作，然而在我近期遇到的一套以VUE3+TS+ElementUI为技术架构的项目中，window.addEventListener完全不生效，查了下原因好像是因为外层容器组件所致，没时间去过多深究原因，直接找解决办法。

在找寻解决办法的过程中，我试过了组件，发现没法实现我想要的对滚动高度进行监测的效果，貌似并不适用于对整个页面进行滚动监测，于是自行摸索并找到了一套解决方案，废话说完，请看代码：

typescript 复制代码

// html部分关键div添加ref进行定位
<template>
  <div ref="scrollContainer">
  		<!-- '省略代码' -->
  		<div ref="scrollRef">
  			<!-- '省略代码' -->
  		</div>
  	</div>
</template>

<script setup lang="ts">
const scrollContainer = ref()
const scrollRef = ref()
const handleScroll = (event: any) => {
  const { scrollTop } = event.target // 获取当前滚动高度
  if (scrollTop > 400) {
    scrollRef.value.style.marginTop = scrollTop - 400 + 'px' // 对选中div层进行样式调整
  } else {
    scrollRef.value.style.marginTop = '0px'
  }
}
onMounted(() => {
scrollContainer.value.parentElement.parentElement.parentElement.addEventListener('scroll', handleScroll)
// 我这里用了三个parentElement，有的项目可能只有一两个，也有的可能更多，看项目结构自行去摸索，目的是找出其可以对addEventListener生效的dom，网上有说是<el-container>组件禁用了这一功能，所以只能找出其更上层的dom
})
</script>