vue实现监听某个元素滚动

1.页面

<template>
	<div ref="scrollview" @mousewheel="scrollChange" class="scrollDetailCl">
		<div>1</div>
		<div>2</div>
		<div>3</div>
	</div>
</template>

2.js

<script>
beforeDestroy() {
  console.log("off event");
  this.$eventBus.$off("receiveCode");
  // 获取指定元素
  const scrollview = this.$refs['scrollview']
  // 移除监听
  scrollview.removeEventListener('scroll', this.scrollChange, true)
},
mounted () {
  // 获取指定元素
  const scrollview = this.$refs['scrollview']
  // 添加滚动监听，该滚动监听了拖拽滚动条
  // 尾部的 true 最好加上，我这边测试没加 true ，拖拽滚动条无法监听到滚动，加上则可以监听到拖拽滚动条滚动回调
  scrollview.addEventListener('scroll', this.scrollChange, true)
},

methods: {
 // 滚动监听
 scrollChange (e) {
   var scrollTop = e.target.scrollTop
   var windowHeight = e.target.clientHeight
   var scrollHeight = e.target.scrollHeight
   console.log(scrollTop,windowHeight,scrollHeight,'123')
   if(scrollTop+windowHeight == scrollHeight){
     console.log('当前滚动条已经触底')
     this.isNoMore = true
   } else {
     this.isNoMore = false
   }
 },
}
</script>

3.样式

<style>
  .scrollDetailCl {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow-y: scroll;
  }
</style>

参考：
https://www.jb51.net/article/256994.htm
https://www.jb51.net/article/192962.htm
https://blog.csdn.net/qq_39285178/article/details/121492500