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

yumo6667个月前 (04-23)技术文章35

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

在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+,实现只需要一段代码,侵入性非常小,样式可完全自定义,支持触摸事件,...

20 个让人惊叹的 JavaScript 单行代码技巧,效率瞬间提升

掌握一些简洁有力的单行代码技巧可以大幅提高编码效率,让JavaScript代码更加优雅。分享 20 个实用且令人惊叹的 JavaScript 单行代码,可能为你的工作带来便利。1. 数组去重const...

CSS view():JavaScript 滚动动画的终结

前言CSS view () 方法可能会标志着 JavaScript 在制作滚动动画方面的衰落。如何用 5 行 CSS 代码取代 50 多行繁琐的 JavaScript,彻底改变网页动画每次和 UI/U...

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

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

10款流行的Markdown编辑器

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

分享 8 个超级实用的前端代码片段,总要用得上的!

1、检测点击元素外部比如你想要点击弹窗外部去关闭弹窗,或者 Vue 的自定义指令 clickoutside,都是利用了下面这个代码片段2、一次性事件监听相信大家都用过 addEventListener...