vue中监听滚动事件:方法简单留着备用

boyanx1个月前技术教程10

看似简单的功能事件,难道了不少朋友,不是功能有多难,而是对原理不了解浪费不少时间;简单明了收藏备用,或推荐给初学的朋友,赠人玫瑰手留余香;

在mounted中监听滚动元素的ID;‘scroll’监听事件名称,this.handleScrol要出发的函数;

mounted() {

document.getElementById('元素ID').addEventListener('scroll',this.handleScroll)

},

被出发的函数,下面用的jQuery获取元素和事件

handleScroll(){
 let sss = $("元素ID").scrollTop();
 console.log(sss);
}

备注:获取元素父元素的ID,因为滚动条属于父元素,如果获取的是子元素,那永远获取的scrollTop的值都是0;

相关文章

蓝色时间轴个人博客网页模板代码(网页制作蓝色的代码)

看雪时间轴个人博客模板,女生唯美简洁个人博客静态页面模板,蓝色时间轴个人网页模板,下雪空间个人模板代码1、html页面代码<!doctype html> <html> <...

jQuery中模拟用户操作(jquery模拟键盘输入)

有时为了节省不想手动操作网页,但又想看到用户操作时的效果,可以用到jQuery提供的trigger方法。见下图代码在不点击按钮时仍然想弹出this.value我们只需要在后面加上.trigger("事...

流程设计器jQuery + svg/vml(流程设计器BPMN)

去年就完成了流程设计器及流程引擎的开发,本想着把流程设计器好好整理一下,形成一个一步一步的开发案例,结果才整理了一点点,发现写文章比写代码还累,加上有事情要忙,结果就。。明天要去外包驻场了,现把流程设...

jquery easyUI 日期格式化,DateBox只显示年

蕃薯耀 2016年6月8日 17:13:32 星期三http://fanshuyao.iteye.com/一、问题描述jquery easyui 本身不支持只显示年或只显示月份二、解决方案:1、增加格...

“我干的真是一份工吗?”做软件工程师有多疯:React+运维+管理=1个人干……

【CSDN 编者按】在技术行业狂奔的今天,软件工程师似乎成了“全能超人”的代名词——既要深挖技术栈,又要横跨前后端,甚至被迫接管运维、管理、产品等角色。对于开发者而言,“全栈”已不再是能力标签,而几乎...

用了都说好的5款免费开源的JavaScript图表库

Planetary.js是一个JavaScript图表库,用于构建交互式地球仪。它使用 D3 和 TopoJSON 解析并显示地理数据。 Planetary.js使用基于建筑的构架插件,也就是说默认的...

发表评论    

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。