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 相关文章推荐
document.designMode的功能与使用方法介绍
Nov 22 Javascript
javascript 页面只自动刷新一次
Jul 10 Javascript
为JavaScript提供睡眠功能(sleep) 自编译JS引擎
Aug 16 Javascript
理解Javascript_12_执行模型浅析
Oct 18 Javascript
HTML Dom与Css控制方法
Oct 25 Javascript
zShowBox 图片放大展示jquery版 兼容性
Sep 24 Javascript
实现placeholder效果的方案汇总
Jun 11 Javascript
js中遍历对象的属性和值的方法
Jul 27 Javascript
详解使用VUE搭建后台管理系统(vue-cli更新至3.0)
Aug 22 Javascript
iview实现select tree树形下拉框的示例代码
Dec 21 Javascript
jquery实现烟花效果(面向对象)
Mar 10 jQuery
vue单应用在ios系统中实现微信分享功能操作
Sep 07 Javascript
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
用ODBC的分页显示
2006/10/09 PHP
用php实现选择排序的解决方法
2013/05/04 PHP
基于OpenCart 开发支付宝,财付通,微信支付参数错误问题
2015/10/01 PHP
Ajax提交表单时验证码自动验证 php后端验证码检测
2016/07/20 PHP
php生成图片缩略图功能示例
2017/02/22 PHP
PHP实现从上往下打印二叉树的方法
2018/01/18 PHP
javascript 图片上传预览-兼容标准
2009/06/01 Javascript
javascript面向对象之Javascript 继承
2010/05/04 Javascript
JavaScript 高级篇之闭包、模拟类,继承(五)
2012/04/07 Javascript
JavaScript使用循环和分割来替换和删除元素实例
2014/10/13 Javascript
js实现最短的XML格式化工具实例
2015/03/12 Javascript
jQuery插件实现大图全屏图片相册
2015/03/14 Javascript
JS如何实现文本框随文本的长度而增长
2015/07/30 Javascript
JS实现点击上移下移LI行数据的方法
2015/08/05 Javascript
js实现的页面矩阵图形变换特效
2016/01/26 Javascript
JavaScript的ExtJS框架中数面板TreePanel的使用实例解析
2016/05/21 Javascript
jQueryUI DatePicker 添加时分秒
2016/06/04 Javascript
jQuery中text() val()和html()的区别实例详解
2016/06/28 Javascript
js实现键盘自动打字效果
2016/12/23 Javascript
JavaScript实现大图轮播效果
2017/01/11 Javascript
详解Javascript几种跨域方式总结
2017/02/27 Javascript
jquery+ajaxform+springboot控件实现数据更新功能
2018/01/22 jQuery
vue配置nprogress实现页面顶部进度条
2019/09/21 Javascript
[01:01:13]2018DOTA2亚洲邀请赛 4.5 淘汰赛 Mineski vs VG 第三场
2018/04/06 DOTA
Django中实现一个高性能计数器(Counter)实例
2014/07/09 Python
Python实现包含min函数的栈
2016/04/29 Python
python实现类之间的方法互相调用
2018/04/29 Python
Django使用消息提示简单的弹出个对话框实例
2019/11/15 Python
django model通过字典更新数据实例
2020/04/01 Python
Pytest如何使用skip跳过执行测试
2020/08/13 Python
Airbnb爱彼迎官网:成为爱彼迎房东,赚取收入
2019/03/14 全球购物
腾讯公司的一个sql题
2013/01/22 面试题
工程材料采购方案
2014/05/18 职场文书
关于调整工作时间的通知
2015/04/24 职场文书
教师文明餐桌光盘行动倡议书
2015/04/28 职场文书
Python中X[:,0]和X[:,1]的用法
2021/05/10 Python