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

yumo6664个月前 (04-23)技术文章24

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

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

相关文章

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

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

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

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

用 Playwright MCP 让 AI 改它自己写的屎山代码

在AI编程领域,我们常常陷入反复修改代码的繁琐流程。本文将介绍如何借助Playwright MCP,让AI自主检测并修复其生成的代码问题,实现开发流程的高效闭环,大幅提升编程效率。在用AI编程开发产品...

编程实例从零基础入门到精通 滚动字幕编程教程#编程

大家好,今天来跟大家分享一下滚动字幕编程的实例。使用的开发平台是全中文界面代码,这款工具不仅可以连接硬件,还可以开发大型软件。现在我们来看一下具体的实例。在使用滚动字幕时,需要添加一个构建,构建选项位...

不能复制的网页怎么提取文字

当你碰到无法直接复制文字的网页,比如网页禁用了右键或文字选中功能时,可借助以下几种方法来提取文字:一、巧用浏览器开发者工具打开开发者工具:在 Windows 系统中,直接按下 F12 键;Mac 系统...