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