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

yumo6662周前 (04-23)技术文章14

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

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

小程序学习日志7:可滚动的视图区域组件(滚动条)

导读经过这段日子的学习,大家对小程序的了解多了多少呢?我们这段时间学了很多组件的用法,以及这些组件的属性和属性的合法值,图片、文字、块,还了解了不少的样式代码和小程序的基本知识。我们今天来讲一个可滚动...

WINCC如何制作滚动播放的文字

首先,我们先看一下文字播放的效果。如视频所示,文字呈跑马灯的形式进来左右来回滚动,那么在wincc中,如果制作这样的效果呢?带着赖工,学会它!第一步:首先在页面合适的位置,新建一个,静态文本,属性见图...

selenium:操作滚动条的方法(8)

selenium支持几种操作滚动条的方法,主要介绍如下:使用ActionChains 类模拟鼠标滚轮操作使用函数ActionChains.send_keys发送按键Keys.PAGE_DOWN往下滑动...

如何实现页面顶部, 自定义滚动进度条样式

关键词:自定义滚动条、自定义顶部滚动条要实现页面顶部的自定义滚动进度条样式,可以按照以下步骤进行:在HTML中添加滚动进度条的容器元素,通常可以使用一个元素作为容器,放在页面顶部的合适位置。<d...