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


Posted in Javascript onSeptember 15, 2018

如下所示:

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垂直滚动条下拉到底部的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript中基本类型和引用类型的区别分析
May 12 Javascript
vue-resource 拦截器使用详解
Feb 21 Javascript
js实现HTML中Select二级联动的实例
Jan 05 Javascript
vue.js与element-ui实现菜单树形结构的解决方法
Apr 21 Javascript
基于Vue组件化的日期联动选择器功能的实现代码
Nov 30 Javascript
微信小程序使用map组件实现检索(定位位置)周边的POI功能示例
Jan 23 Javascript
Node.js 路由的实现方法
Jun 05 Javascript
详解如何提升JSON.stringify()的性能
Jun 12 Javascript
react koa rematch 如何打造一套服务端渲染架子
Jun 26 Javascript
js实现旋转木马轮播图效果
Jan 10 Javascript
vue实现输入框自动跳转功能
May 20 Javascript
vue使用transition组件动画效果的实例代码
Jan 28 Vue.js
vue--点击当前增加class,其他删除class的方法
Sep 15 #Javascript
vue-cli 使用vue-bus来全局控制的实例讲解
Sep 15 #Javascript
在vue中实现点击选择框阻止弹出层消失的方法
Sep 15 #Javascript
对vue下点击事件传参和不传参的区别详解
Sep 15 #Javascript
vue-cli webpack 引入swiper的操作方法
Sep 15 #Javascript
swiper在vue项目中loop循环轮播失效的解决方法
Sep 15 #Javascript
解决vue中虚拟dom,无法实时更新的问题
Sep 15 #Javascript
You might like
先进的自动咖啡技术,真的可以取代咖啡师吗?
2021/03/06 冲泡冲煮
一个可查询所有表的“通用”查询分页类
2006/10/09 PHP
php5.3 goto函数介绍和示例
2014/03/21 PHP
{}与function(){}选用空对象{}来存放keyValue
2012/05/23 Javascript
caller和callee的区别介绍及演示结果
2013/03/10 Javascript
jquery 多行文本框(textarea)高度变化
2013/07/03 Javascript
wap手机图片滑动切换特效无css3元素js脚本编写
2014/07/28 Javascript
angularjs中的单元测试实例
2014/12/06 Javascript
在localStorage中存储对象数组并读取的方法
2016/09/24 Javascript
利用jQuery对无序列表排序的简单方法
2016/10/16 Javascript
NODE.JS跨域问题的完美解决方案
2016/10/20 Javascript
js 数据存储和DOM编程
2017/02/09 Javascript
jQuery.ajax向后台传递数组问题的解决方法
2017/05/12 jQuery
nodejs项目windows下开机自启动的方法
2017/11/22 NodeJs
vue中使用codemirror的实例详解
2018/11/01 Javascript
JavaScript ES2019中的8个新特性详解
2019/02/20 Javascript
利用 Chrome Dev Tools 进行页面性能分析的步骤说明(前端性能优化)
2021/02/24 Javascript
实例讲解Python编程中@property装饰器的用法
2016/06/20 Python
Python实现的栈(Stack)
2018/01/26 Python
pycharm设置注释颜色的方法
2018/05/23 Python
Python魔法方法详解
2019/02/13 Python
django模板结构优化的方法
2019/02/28 Python
Python使用reportlab模块生成PDF格式的文档
2019/03/11 Python
python3.6 tkinter实现屏保小程序
2019/07/30 Python
解决jupyter运行pyqt代码内核重启的问题
2020/04/16 Python
学习Python爬虫的几点建议
2020/08/05 Python
基于Python模拟浏览器发送http请求
2020/11/06 Python
python UIAutomator2使用超详细教程
2021/02/19 Python
我的大学生活职业生涯规划
2014/01/02 职场文书
小学英语教师先进事迹
2014/05/28 职场文书
高中校园广播稿3篇
2014/09/29 职场文书
2015年平安创建工作总结
2015/04/29 职场文书
学雷锋活动简报
2015/07/20 职场文书
创业计划书之川味火锅店
2019/09/02 职场文书
python3中apply函数和lambda函数的使用详解
2022/02/28 Python
Oracle配置dblink访问PostgreSQL的操作方法
2022/03/21 PostgreSQL