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 相关文章推荐
Js控制弹窗实现在任意分辨率下居中显示
Aug 01 Javascript
使用firebug进行调试javascript的示例
Dec 16 Javascript
js监听滚动条滚动事件使得某个标签内容始终位于同一位置
Jan 24 Javascript
JavaScript实现文字跟随鼠标特效
Aug 06 Javascript
jQuery学习心得总结(必看篇)
Jun 10 Javascript
jQuery文件上传控件 Uploadify 详解
Jun 20 Javascript
Bootstrap基本插件学习笔记之模态对话框(16)
Dec 08 Javascript
使用vue-route 的 beforeEach 实现导航守卫(路由跳转前验证登录)功能
Mar 22 Javascript
微信小程序排坑指南详解
May 23 Javascript
基于vue 实现表单中password输入的显示与隐藏功能
Jul 19 Javascript
基于JS判断对象是否是数组
Jan 10 Javascript
构建一个JavaScript插件系统
Oct 20 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
PHP表单验证的3个函数ISSET()、empty()、is_numeric()的使用方法
2011/08/22 PHP
php+highchats生成动态统计图
2014/05/21 PHP
PHP实现的回溯算法示例
2017/08/15 PHP
Laravel timestamps 设置为unix时间戳的方法
2019/10/11 PHP
php实现根据身份证获取精准年龄
2020/02/26 PHP
jQuery 操作XML入门
2008/12/25 Javascript
Javascript中call和apply函数的比较和使用实例
2015/02/03 Javascript
使用JavaScript制作一个简单的计数器的方法
2015/07/07 Javascript
Javascript技术栈中的四种依赖注入详解
2016/02/23 Javascript
使用CSS+JavaScript或纯js实现半透明遮罩效果的实例分享
2016/05/09 Javascript
jQuery获取多种input值的简单实现方法
2016/06/20 Javascript
微信小程序 swiper组件轮播图详解及实例
2016/11/16 Javascript
详解微信小程序 页面跳转 传递参数
2016/12/08 Javascript
详解Vue文档中几个易忽视部分的剖析
2018/03/24 Javascript
详解KOA2如何手写中间件(装饰器模式)
2018/10/11 Javascript
vue 实现 rem 布局或vw 布局的方法
2019/11/13 Javascript
js实现页面导航层级指示效果
2020/08/25 Javascript
[03:10]超级美酒第四天 fy拉比克秀 大合集
2018/06/05 DOTA
详解Python多线程
2016/11/14 Python
Python heapq使用详解及实例代码
2017/01/25 Python
用python做一个搜索引擎(Pylucene)的实例代码
2017/07/05 Python
Python基于OpenCV库Adaboost实现人脸识别功能详解
2018/08/25 Python
对Python实现简单的API接口实例讲解
2018/12/10 Python
python爬虫 线程池创建并获取文件代码实例
2019/09/28 Python
Python常用模块sys,os,time,random功能与用法实例分析
2020/01/07 Python
MNIST数据集转化为二维图片的实现示例
2020/01/10 Python
卸载tensorflow-cpu重装tensorflow-gpu操作
2020/06/23 Python
致跳远、跳高运动员广播稿
2014/01/09 职场文书
信仰心得体会
2014/09/05 职场文书
党员自我剖析材料(群众路线)
2014/10/06 职场文书
门面房租房协议书
2014/12/01 职场文书
2014年生活老师工作总结
2014/12/23 职场文书
党员转正意见怎么写
2015/06/03 职场文书
《小小的船》教学反思
2016/02/18 职场文书
高三化学教学反思
2016/02/22 职场文书
python实现简单的三子棋游戏
2022/04/28 Python