700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > vue2.0中简单判断是否滚动条触底

vue2.0中简单判断是否滚动条触底

时间:2020-05-07 02:32:28

相关推荐

vue2.0中简单判断是否滚动条触底

VUE.JS判断是否触底(简单版)

通过原生JS的滚动监听事件来完成是否触底的判断

客户端应用的触底判断

getbottom() {// 返回滚动条垂直滚动距离let scrollTop =document.documentElement.scrollTop || document.body.scrollTop;// 返回该元素的像素高度,高度包含内边距(padding),不包含边框(border),外边距(margin)和滚动条let clientHeight =document.documentElement.clientHeight || document.body.clientHeight;// 返回该元素的像素高度,高度包含内边距(padding),不包含外边距(margin)、边框(border)let scrollHeight =document.documentElement.scrollHeight || document.body.scrollHeight;let numHeight = scrollTop + clientHeight;if (scrollHeight > clientHeight && numHeight > scrollHeight - 1) {console.log('触底了');}},

添加监听事件

在Mounted阶段添加监听

mounted() {window.addEventListener("scroll", this.getbottom);},

在组件销毁时移除监听

destroyed() {window.removeEventListener("scroll", this.getbottom);},

图片源自:菜鸟教程

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。