vue 监听某个div垂直滚动条下拉到底部的方法

更新时间：2018年09月15日 14:31:48 作者：积累jiuduo

今天小编就为大家分享一篇vue 监听某个div垂直滚动条下拉到底部的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

如下所示：

this.$nextTick(() => {
const el = document.querySelector('.act-not');
const offsetHeight = el.offsetHeight;
el.onscroll = () => {
const scrollTop = el.scrollTop;
const scrollHeight = el.scrollHeight;
if ((offsetHeight + scrollTop) - scrollHeight >= -1) {
// 需要执行的代码
}
};
});

坑：在做滚动加载分页时候，有时候第三方的弹窗如elementui 会出问题，这时候需要watch变量弹窗关闭时修改el.scrollTop=0即可。

以上这篇vue 监听某个div垂直滚动条下拉到底部的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

Vue安装与使用
Vue是一套用于构建前后端分离的框架。刚开始是由国内优秀选手尤雨溪开发出来的，目前是全球“最”流行的前端框架。使用vue开发网页很简单，并且技术生态环境完善，社区活跃，是前后端找工作必备技能！下面来看看其得安装及使用方法吧
2021-10-10
vue中父子组件传值,解决钩子函数mounted只运行一次的操作
这篇文章主要介绍了vue中父子组件传值,解决钩子函数mounted只运行一次的操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-07-07
vue router2.0二级路由的简单使用
这篇文章主要为大家详细介绍了vue router2.0二级路由的简单使用，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-07-07
vue2.x中monaco-editor的使用说明
这篇文章主要介绍了vue2.x中monaco-editor的使用说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-08-08
vue 实现微信浮标效果
微信的浮窗，大伙应该都用过，当我们正在阅读一篇公众号文章时，突然需要处理微信消息，点击浮窗，在微信上会有个浮标，点击浮标可以再次回到文章。今天小编抽空给大家介绍vue 实现微信浮标效果，感兴趣的朋友一起看看吧
2019-09-09
vue实现个人信息查看和密码修改功能
本文通过实例代码给大家介绍了vue实现个人信息查看和密码修改功能，文中给大家补充介绍了vue实现密码显示隐藏切换功能，非常不错，具有一定的参考借鉴价值，感兴趣的朋友一起看看吧
2018-05-05
element el-tree折叠收缩的实现示例
本文主要介绍了element el-tree折叠收缩的实现示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-08-08
vue学习笔记之Vue中css动画原理简单示例
这篇文章主要介绍了vue学习笔记之Vue中css动画原理,结合简单实例形式分析了Vue中css样式变换动画效果实现原理与相关操作技巧,需要的朋友可以参考下
2020-02-02
vue项目中引入js-base64方式
这篇文章主要介绍了vue项目中引入js-base64方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-04-04
Vue组件生命周期三个阶段全面总结讲解
Vue的生命周期就是vue实例从创建到销毁的全过程,也就是new Vue() 开始就是vue生命周期的开始。Vue 实例有⼀个完整的⽣命周期,也就是从开始创建、初始化数据、编译模版、挂载Dom -> 渲染、更新 -> 渲染、卸载等⼀系列过程,称这是Vue的⽣命周期
2022-11-11