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

boyanx3个月前技术教程15

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

在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;

相关文章

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

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

ClockPicker调用方法(α clock)

ClockPicker.js是一款时钟插件,其实还可以改进,里面的分可以改成短横线。在线实例实例预览jQuery ClockPicker 圆形时钟使用方法 <div class="input-g...

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

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

了解 JS 的加载顺序和方式,实现 Ready 方法

页面加载 JS 顺序或方式不同,可能会导致功能失效、错误的产生或加载解析时间过长,拖慢整个页面展示。了解 JS 的加载顺序了解页面元素的加载顺序,找到 JS 执行失败原因。有时明明没有问的代码,可就获...

酷炫时间罗盘(时间罗盘是什么)

感觉很新奇的时间罗盘程序,显示非常酷炫,如下图:源代码如下罗盘.html <!doctype html> <html> <head> <meta charse...

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

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

发表评论    

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