vue监控指定div滑动触底

一共有两种方法，但是不论哪种方法，
一定要给监听的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 + windowHeithtif(total == scrollHeight){console.log("到底了")}}
}

方法二：div有个@scroll方法可以直接用
methods:{handlerScroll(e){const dom = e.targetvar scrollTop = dom.scrollTop; //滑入屏幕上方的高度var windowHeitht = dom.clientHeight; //能看到的页面的高度var scrollHeight = dom.scrollHeight; //监控的整个div的高度（包括现在看到的和上下隐藏起来看不到的）let total = scrollTop + windowHeithtif(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=truethis.dataEmbranchment=this.tableData.slice(0,this.size*this.page)this.page++;this.tableLoading=false}},true);

vue监控指定div滑动触底相关推荐

Vue 列表懒加载触底加载
一.方法一描述:列表懒加载+节流效果图: 实现: 组件:LazyLoading <template><div class="lazy-list">< ...
触底加载MintUI
实现切换顶部选项卡时,更新文章列表由于每个选项卡的内容布局都一样,所以切换导航选项时紧紧需要更新列表即可,没有必要搞那么多的面板.干掉仨,留一个即可. 步骤: 干掉后三个container-item ...
h5+vue页面下滑查看更多页面触底+页面滑动
h5页面触底,不足一屏触发滑动超过一屏触发触底效果解决页面大屏正好一屏,小屏超过一屏页面下滑查看更多的问题解决方法1 超过一屏监听滚动触底触发小于或等于一屏监听触摸上滑触发 data ...
vue下拉触底，判断上滑下滑
下拉触底常用参数 scrollHeight(文档内容实际高度,包括超出视窗的溢出部分). scrollTop(滚动条滚动距离). clientHeight(窗口可视范围高度). 当 clientHe ...
固定顶部指定div不滑动
.fixed_div { position:fixed; z-index:100; top: 45px; width:100%; height:45px; } 指定div设置属性position:fi ...
vue判断组件是否显示_Vue组件实现触底判断
本文实例为大家分享了Vue组件实现触底判断的具体代码,供大家参考,具体内容如下非常简陋的代码,以后有空回来完善子组件代码: export default { name:'Scroll', meth ...
Vue js 实现点击页面空白处隐藏指定div
Vue js 实现点击页面空白处隐藏指定div <template><div class="page" @ ...
微信小程序滚动Tab选项卡：左右滑动切换、触底加载分页
文章目录效果图一.顶部标签栏二.列表内容部分 swiper组件高度及上下滚动样式三.数据结构及赋值方法四.scroll组件触底事件(分页相关五.scroll组件的高度样式 swiper组件 ...
列表如何做，看这一篇就够啦——触底加载、虚拟滚动与计算展现值
我们作为前端,平时遇到的一大类工作就是展现各种的数据,而列表就是其中一个基础而通用的形式,无论是像Google.百度这样的搜索引擎,到像Facebook.Twitter.掘金这样的用户社区,抑或是像美 ...

vue监控指定div滑动触底

vue监控指定div滑动触底相关推荐

最新文章

热门文章