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 相关文章推荐
Mac/Windows下如何安装Node.js
Nov 22 Javascript
node.js实现多图片上传实例
Jun 03 Javascript
jquery控制表单输入框显示默认值的方法
May 22 Javascript
js实现a标签超链接提交form表单的方法
Jun 24 Javascript
javaScript+turn.js实现图书翻页效果实例代码
Feb 16 Javascript
基于vue实现分页/翻页组件paginator示例
Mar 09 Javascript
vue.js做一个简单的编辑菜谱功能
May 08 Javascript
vue给组件传递不同的值方法
Sep 29 Javascript
vue实现设置载入动画和初始化页面动画效果
Oct 28 Javascript
原生JS与CSS实现软件卸载对话框功能
Dec 05 Javascript
javascript canvas封装动态时钟
Sep 30 Javascript
vue基于Teleport实现Modal组件
May 31 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格式化工具Beautify PHP小小BUG
2008/04/24 PHP
PHP捕获Fatal error错误的方法
2014/06/11 PHP
php批量删除操作代码分享
2017/02/26 PHP
使用PHP反射机制来构造"CREATE TABLE"的sql语句
2019/03/21 PHP
PHP抽象类与接口的区别详解
2019/03/21 PHP
Ext JS 4实现带week(星期)的日期选择控件(实战一)
2013/08/21 Javascript
javascript实现yield的方法
2013/11/06 Javascript
js中浮点型运算BUG的解决方法说明
2014/01/06 Javascript
node.js中的fs.chmodSync方法使用说明
2014/12/18 Javascript
javascript动画算法实例分析
2015/07/31 Javascript
利用JS生成博文目录及CSS定制博客
2016/02/10 Javascript
JS实现自动阅读单词(有道单词本添加功能)
2016/11/14 Javascript
nodejs redis 发布订阅机制封装实现方法及实例代码
2016/12/15 NodeJs
详解能在多种前端框架下使用的表格控件
2017/01/11 Javascript
JavaScript获取select中text值的方法
2017/02/13 Javascript
使用Node.js搭建静态资源服务详细教程
2017/08/02 Javascript
Vue 之孙组件向爷组件通信的实现
2019/04/23 Javascript
微信小程序实现吸顶特效
2020/01/08 Javascript
Windows下安装 node 的版本控制工具 nvm
2020/02/06 Javascript
jquery实现简单每周轮换的日历
2020/09/10 jQuery
详解React的回调渲染模式
2020/09/10 Javascript
Vue中使用wangeditor富文本编辑的问题
2021/02/07 Vue.js
Python中为什么要用self探讨
2015/04/14 Python
浅谈pyqt5中信号与槽的认识
2019/02/17 Python
Python中一般处理中文的几种方法
2019/03/06 Python
Python 实现取多维数组第n维的前几位
2019/11/26 Python
python如何实现复制目录到指定目录
2020/02/13 Python
css3实现超炫风车特效
2014/11/12 HTML / CSS
浅析数据存储的三种方式 cookie sessionstorage localstorage 的异同
2020/06/04 HTML / CSS
nohup的用法
2012/11/26 面试题
安全生产月演讲稿
2014/05/09 职场文书
房地产广告策划方案
2014/05/15 职场文书
美德少年事迹材料1000字
2014/08/21 职场文书
维护民族团结演讲稿
2014/08/27 职场文书
node.js使用express-fileupload中间件实现文件上传
2021/07/16 Javascript
自动在Windows中运行Python脚本并定时触发功能实现
2021/09/04 Python