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

boyanx8个月前技术教程26

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

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

相关文章

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

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

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

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

java学习路线 新手必备 没有学不会的知识

怎么学习Java,这是很多新手经常会问我的问题,现在我简单描述下一个Java初学者到就业要学到的一些东西: 首先要明白Java体系设计到得三个方面:J2SE,J2EE,J2ME(KJAVA)。J2S...

Datetimepicker.js用法(datetimepicker属性)

$('.form_date').datetimepicker({//初始化 language: 'zh-CN', //weekStart: 1,...

ClockPicker调用方法(α clock)

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

学习下ECharts 异步加载数据(echarts加载大量数据)

ECharts 通常数据设置在 setOption 中,如果我们需要异步加载数据,可以配合 jQuery等工具,在异步获取数据后通过 setOption 填入数据和配置项就行。ECharts 通常数据...

发表评论    

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