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面向对象之四 继承
Feb 08 Javascript
fmt:formatDate的输出格式详解
Jan 09 Javascript
JavaScript中的索引数组、关联数组和静态数组、动态数组讲解
Nov 08 Javascript
扒一扒JavaScript 预解释
Jan 28 Javascript
jQuery搜索子元素的方法
Feb 10 Javascript
JS实现超过长度限制后自动跳转下一款文本框的方法
Feb 23 Javascript
Javascript中的getUTCHours()方法使用详解
Jun 10 Javascript
基于javascript实现九九乘法表
Mar 27 Javascript
vue axios整合使用全攻略
May 24 Javascript
vue指令之表单控件绑定v-model v-model与v-bind结合使用
Apr 17 Javascript
js计算两个时间差 天 时 分 秒 毫秒的代码
May 21 Javascript
实例讲解React 组件
Jul 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
linux下php上传文件注意事项
2016/06/11 PHP
php 无限分类 树形数据格式化代码
2016/10/11 PHP
centos 7.2下搭建LNMP环境教程
2016/11/20 PHP
PHP编程计算两个时间段是否有交集的实现方法(不算边界重叠)
2017/05/30 PHP
php使用str_replace替换多维数组的实现方法分析
2017/06/15 PHP
php/JS实现的生成随机密码(验证码)功能示例
2019/06/06 PHP
基于PHP实现发微博动态代码实例
2020/12/11 PHP
js类 from qq
2006/11/13 Javascript
jquery简单体验
2007/01/10 Javascript
ASP中用Join和Array,可以加快字符连接速度的代码
2007/08/22 Javascript
Prototype Number对象 学习
2009/07/19 Javascript
jQuery中:eq()选择器用法实例
2014/12/29 Javascript
浅谈EasyUI中编辑treegrid的方法
2015/03/01 Javascript
Node.js中常规的文件操作总结
2016/10/13 Javascript
Javascript实现登录记住用户名和密码功能
2017/03/22 Javascript
js中url对象化管理分析
2017/12/29 Javascript
详解搭建es6+devServer简单开发环境
2018/09/25 Javascript
vue-quill-editor+plupload富文本编辑器实例详解
2018/10/19 Javascript
[01:30]我们共输赢 完美世界城市挑战赛开启全新赛季
2019/04/19 DOTA
Python 模板引擎的注入问题分析
2017/01/01 Python
Python基于pygame模块播放MP3的方法示例
2017/09/30 Python
tensorflow saver 保存和恢复指定 tensor的实例讲解
2018/07/26 Python
解决Python 使用h5py加载文件,看不到keys()的问题
2019/02/08 Python
opencv3/C++实现视频背景去除建模(BSM)
2019/12/11 Python
Python使用jupyter notebook查看ipynb文件过程解析
2020/06/02 Python
CSS3 绘制BMW logo实的现代码
2013/04/25 HTML / CSS
基于css3 animate制作绚丽的动画效果
2015/11/24 HTML / CSS
英国演唱会订票网站:Ticket Selection
2018/03/27 全球购物
Arti-shopping中文官网:大型海外商品一站式直邮平台
2020/03/23 全球购物
DJI全球:DJI Global
2021/03/15 全球购物
《三亚落日》教学反思
2014/04/26 职场文书
青安岗事迹材料
2014/05/14 职场文书
离婚协议书标准格式
2014/10/04 职场文书
师范生教育见习总结
2015/06/23 职场文书
一文搞懂PHP中的抽象类和接口
2022/05/25 PHP
MySQL数据库简介与基本操作
2022/05/30 MySQL