vue3滚动条无法监测滚动高度问题

第一个是根组件

第二个是子组件

第三个是滚动复用组件

在滚动复用组件中想要监测滚动的高度变化，一开始没有使用el-scrollbar组件而是直接使用原生的格式导致如图所示

滚动条与文章列表并属于el-main的两个部分，而document.documentElement.scrollTop || document.body.scrollTop这个监测高度的方法只能监测整个页面的滚动变化，因此一直为0。
从网上搜寻后主要找到两种方案：
1、让scroll-page组件监听el-main的高度变化，需要实现组件之间的信息传递，这条路我没有走通，始终抓取不到el-main的属性
2、使用element plus中的el-scrollbar组件，利用this.$refs.scroll.$refs.wrapRef.scrollTop;这种方式去调用，wrapRef 通常是 Element UI 的 el-scrollbar 组件内部的一个具有滚动功能的 DOM 元素的引用，当你访问 wrapRef 的 scrollTop 属性时，你实际上是在获取这个特定元素的滚动条的当前位置，这样也能够获取到高度。