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

yumo66610个月前 (04-23)技术文章46

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

在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.NiceScroll

nicescroll 滚动条插件是一个非常强大的基于 jQuery 的滚动条插件,不需要增加额外的css,几乎全浏览器兼容。ie6+,实现只需要一段代码,侵入性非常小,样式可完全自定义,支持触摸事件,...

网页背景全屏就这?分享 1 段优质 CSS 代码片段!

大家好,我是大澈!本文约 700+ 字,整篇阅读约需 1 分钟。每日分享一段优质代码片段。今天分享一段 CSS 代码片段,使用 CSS 设置网页全屏背景图片,很简单。老规矩,先阅读代码片段并思考,再看...

微软将大幅改善Chrome和Edge体验:消除滚动延迟

来源:快科技Chrome和Edge是当前全球份额前二的浏览器,尤其是在Edge切换到Chromium开源生态后,微软也开始贡献大量优化代码。过去数月,微软与谷歌合作,将Edge的滚动优化代码提交到开源...

10款流行的Markdown编辑器

1、 用户能借助键盘快捷键或工具栏按钮应用及删除 Markdown 格式。MarkdownPad 的左右栏分隔设计,可让用户实时查看以 HTML 格式呈现的 Markdown 文档效果。2、 WMD3...

实战Puppeteer-使用原生代码与页面交互

概述我们前面已经介绍不少Puppeteer实现操控页面对象的例子。现在我们应该停下来,好好思考一下,Puppeteer实现的原理是什么?我们不需要通过Puppeteer源码来理解Puppeteer,只...