vue监控指定div滑动触底
一共有两种方法,但是不论那种方法,一定要给监听的div设置overflow-y: scroll;属性!一定要给监听的div设置overflow-y: scroll;属性!一定要给监听的div设置overflow-y: scroll;属性!不然监听不到滑动到屏幕上方的高度!<div class="person" ref="personDom" @scroll="handlerScroll($e
·
一共有两种方法,但是不论哪种方法,
一定要给监听的div设置overflow-y: scroll;属性!
一定要给监听的div设置overflow-y: scroll;属性!
一定要给监听的div设置overflow-y: scroll;属性!
不然监听不到滑动到屏幕上方的高度!
<div class="person" ref="personDom" @scroll="handlerScroll($event)" ></div>
方法一:给指定div设置监听事件
mounted({
this.$refs.personDom.addEventListener('scroll',this.handleScroll,true);
}
methods:{
handleScroll(){
var scrollTop = this.$refs.personDom.scrollTop; //滑入屏幕上方的高度
var windowHeitht = this.$refs.personDom.clientHeight; //能看到的页面的高度
var scrollHeight = this.$refs.personDom.scrollHeight; //监控的整个div的高度(包括现在看到的和上下隐藏起来看不到的)
let total = scrollTop + windowHeitht
if(total == scrollHeight){
console.log("到底了")
}
}
}
方法二:div有个@scroll方法可以直接用
methods:{
handlerScroll(e){
const dom = e.target
var scrollTop = dom.scrollTop; //滑入屏幕上方的高度
var windowHeitht = dom.clientHeight; //能看到的页面的高度
var scrollHeight = dom.scrollHeight; //监控的整个div的高度(包括现在看到的和上下隐藏起来看不到的)
let total = scrollTop + windowHeitht
if(total == scrollHeight){
console.log("到底了")
}
}
this.$refs.table.bodyWrapper.addEventListener('scroll', (res) => {
let height = res.target;
let clientHeight = height.clientHeight;
let scrollTop = height.scrollTop;
let scrollHeight = height.scrollHeight;
if(clientHeight + scrollTop + 300 > scrollHeight){
this.tableLoading=true
this.dataEmbranchment=this.tableData.slice(0,this.size*this.page)
this.page++;
this.tableLoading=false
}
},true);
更多推荐
已为社区贡献1条内容
所有评论(0)