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 相关文章推荐
颜色选择器 Color Picker,IE,Firefox,Opera,Safar
Nov 25 Javascript
JavaScript闭包 懂不懂由你反正我是懂了
Oct 21 Javascript
JS判断当前日期是否大于某个日期的实现代码
Sep 02 Javascript
Javascript基础知识(一)核心基础语法与事件模型
Sep 29 Javascript
JavaScript动态创建link标签到head里的方法
Dec 22 Javascript
JavaScript中innerHTML,innerText,outerHTML的用法及区别
Sep 01 Javascript
Angularjs结合Bootstrap制作的一个TODO List
Aug 18 Javascript
JavaScript门道之标准库
May 26 Javascript
使用layui的router来进行传参的实现方法
Sep 06 Javascript
关于vue属性使用和不使用冒号的区别说明
Oct 22 Javascript
vue实现下载文件流完整前后端代码
Nov 17 Vue.js
深入讲解Vue中父子组件通信与事件触发
Mar 22 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
并发下常见的加锁及锁的PHP具体实现代码
2010/10/12 PHP
php中将字符串转为HTML的实体引用的一个类
2013/02/03 PHP
PHP设计模式之结构模式的深入解析
2013/06/13 PHP
Symfony的安装和配置方法
2016/03/17 PHP
PHP如何实现订单的延时处理详解
2017/12/30 PHP
PHP addcslashes()函数讲解
2019/02/03 PHP
jQuery 浮动广告实现代码
2008/12/25 Javascript
JavaScript 保存数组到Cookie的代码
2010/04/14 Javascript
Date对象格式化函数代码
2010/07/17 Javascript
JS获取当前日期和时间的简单实例
2013/11/19 Javascript
JS交换变量的方法
2015/01/21 Javascript
JavaScript动态提示输入框输入字数的方法
2015/07/27 Javascript
jQuery validate插件实现ajax验证重复的2种方法
2016/01/22 Javascript
jQuery+css实现的时钟效果(兼容各浏览器)
2016/01/27 Javascript
分离与继承的思想实现图片上传后的预览功能:ImageUploadView
2016/04/07 Javascript
JQuery validate插件Remote用法大全
2016/05/15 Javascript
如何使用headjs来管理和异步加载js
2016/11/29 Javascript
浅谈js键盘事件全面控制
2016/12/01 Javascript
JavaScript求一个数组中重复出现次数最多的元素及其下标位置示例
2018/07/23 Javascript
实现elementUI表单的全局验证的方法步骤
2019/04/29 Javascript
使用Node.js写一个代码生成器的方法步骤
2019/05/10 Javascript
vue滚动插件better-scroll使用详解
2019/10/18 Javascript
JS跨浏览器解析XML应用过程详解
2020/10/16 Javascript
十个Python程序员易犯的错误
2015/12/15 Python
Python中scatter函数参数及用法详解
2017/11/08 Python
浅述python2与python3的简单区别
2018/09/19 Python
django自定义非主键自增字段类型详解(auto increment field)
2020/03/30 Python
OpenCV+python实现膨胀和腐蚀的示例
2020/12/21 Python
微软香港官网及网上商店:Microsoft HK
2016/09/01 全球购物
Dillard’s百货官网:Dillards.com
2018/05/26 全球购物
如何写好升职自荐信
2014/01/06 职场文书
爱情保证书范文
2014/02/01 职场文书
大学生创业策划书
2014/02/02 职场文书
党的群众路线教育实践活动领导班子整改措施
2014/09/30 职场文书
教师思想工作总结2015
2015/05/13 职场文书
原告代理词范文
2015/05/25 职场文书