vue 监听某div滚动条的滚动事件

最新推荐文章于 2024-03-15 11:10:04 发布

原创最新推荐文章于 2024-03-15 11:10:04 发布 · 1w 阅读

16 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

VUE

当前文章被收录于：

VUE

31 篇文章 2 人学习

订阅专栏查看详情

css

当前文章被收录于：

css

20 篇文章 2 人学习

订阅专栏查看详情

当前文章被以下社区和专栏收录：

本文介绍如何在Vue中使用ref和mounted钩子函数监听div元素的滚动事件，通过addEventListener实现对滚动条位置的实时监控，并记录鼠标滚动时的位置。

监听此div , 定义ref  
<div class="productSec" ref="rightContent" @mousewheel="scrool">


mounted: function(){
  //在mounted钩子函数绑定滚动条事件
  this.$refs.rightContent.addEventListener('scroll', this.scrool);
  
},

methods: {
  scrool(){
    console.log('===scrool===') 
    let scrolled = this.$refs.rightContent.scrollTop;
    console.log(scrolled ) 
  } 
},

注：只写@mousewheel="scrool" 鼠标滚动事件，不能监听到：用鼠标拖动滚动条

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

付月半子

关注关注

3
点赞
踩
16

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

ArcMap|时空地理加权回归（GTWR）

热门推荐

个人学习笔记

03-03

1万+

ArcGIS的GTWR插件下载地址：https://www.researchgate.net/publication/329518786_GTWR_ADDIN_Valid_till_Dec_31_2022 更详细的操作参考： https://www.bilibili.com/video/BV1fR4y1M7xB?spm_id_from=333.999.0.0 https://blog.csdn.net/weixin_40008135/article/details/112693520 双击“GTWR_Be

参与评论您还未登录，请先登录后发表或查看评论

Linux 内核参数：meminfo

私房菜

09-29

2368

内存管理是一个相对复杂的内核模块，错综复杂的数据结构和管理逻辑。Linux 内核为了帮助开发者从宏观上把握内存的使用情况，在几大核心数据结构中都有相应的计数统计，如物理页面使用情况、伙伴系统分配情况、内存管理区的页面使用情况、内存回收扫描回收情况、内存规整触发情况等等。本文要分析的节点meminfo是Linux 操作系统中查看系统内存最准确(meminfo 中有内存黑洞)的方法，它包含当前时刻系统的所有物理页面的信息。

使用vue.js在页面内组件监听scroll事件的方法

10-18

今天小编就为大家分享一篇使用vue.js在页面内组件监听scroll事件的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

PDF-XChange Editor.zip PDF免费编辑软件

PDF免费编辑软件，可对PDF页面编辑、页合并、删除，多个PDF文件合并

vue快速监听div滚动事件

weixin_44540711的博客

09-11

5589

在使用vue进行项目开发的时候，有时会需要我们监听div是否发生滚动，来改变dom样式，接下来让我们就使用最直接的方式进行监听 1、给div绑定滚动事件 <div class="task-operation-item-list" @scroll="scrollEvent" ref="scrollDiv"> </div> 2、创建监听方法在methods中创建如下方法 scrollEvent () { console.log(this.$refs.scro

Div 高度、滚动条距 Div 顶部偏移量、Div 中文档总高度

蚩尤后裔-汪茂雄

11-27

6419

目录示例图说明编码示例回到顶/底部消息区自动滚动到底部示例图说明如上图所示，假设橙色表示滚动条，蓝色框表示 div 区域，黑色区域表示看不到的文档部分，高度说明如下： B：表示 div 元素高度，div 的高度不会随着内容的编号而编号，与有没有出现滚动条无关，只与自己的 height 属性有关 A：表示 div 内文档高度，当没有出现滚动条时，A文档高度...

vue监控指定div滑动触底

qq_40997700的博客

12-30

3304

一共有两种方法，但是不论那种方法，一定要给监听的div设置overflow-y: scroll;属性！一定要给监听的div设置overflow-y: scroll;属性！一定要给监听的div设置overflow-y: scroll;属性！不然监听不到滑动到屏幕上方的高度！ <div class="person" ref="personDom" @scroll="handlerScroll($event)" ></div> 方法一：给指定div这是监听事件 mounted(

vue 移动端监听div滚动条的滚动事件

weixin_46452138的博客

11-04

2006

第一步：监听div，定义ref <div class="accpdfbox" ref="rightContent" @scroll="scrool"> </div> 第二步：在mounted钩子函数绑定滚动条事件 mounted() { this.$refs.rightContent.addEventListener('scroll', this.scrool); } 第三步：监听滚动条高度的方法 methods: { scrool(){

vue滚动条事件（获取滚动条距离底部距离）

weixin_30532987的博客

06-05

6693

网上大部分vue的滚动条操作是监听dom实现，我是用@scroll实现首先有滚动条的div一定要设固定高度，然后overflow:auto;出现滚动条 passive是使滚动更加流畅，减少卡顿 <div @scroll.passive="getScroll($event)" style="height:100px;overflow:auto;"> &lt...

vue 监听滚动条（获取滚动条距离底部距离）

m0_56363729的博客

01-24

2308

参考链接：https://www.cnblogs.com/yck123/p/10978941.html @scroll实现首先有滚动条的div一定要设固定高度，然后overflow:auto;出现滚动条 passive是使滚动更加流畅，减少卡顿, <div id="my" @scroll.passive="getScroll($event)"></div> getScroll(event) { // 滚动条距离底部的距离scrollBottom let

h5滚动隐藏滚动条_vue.js-div怎么隐藏滚动条

weixin_42323064的博客

01-14

1146

这次给大家带来vue.js-div怎么隐藏滚动条，vue.js-div隐藏滚动条的注意事项有哪些，下面就是实战案例，一起来看一下。组件被包在一个高度固定的pmounted () {var bop = document.getElementById(this.id);if(bop == undefined){return;}var isFirefox=navigator.userAgent.inde...

vue中判断div滚动条是否置底

qq_37162688的博客

04-18

2301

业务中遇到这个问题，百度搜索了一下，没有好的方案就自己写了一个。在mounted中监听对应的div滚动事件 document.querySelector('.content-box').addEventListener("scroll", this.scrollToTop); 在方法中执行 scrollToTop(){ let el=document.querySelector('.co...

vue项目实现盒子滚动到底部加载更多的功能

Var的博客

07-23

1757

vue项目实现div盒子滚动到底部加载更多的功能使用vue 的 scroll 事件可以很快的实现 ----html <div class="scroll_box" ref="evabox" @scroll="Scroll"> <div v-for="(item,index) in imgList" :key="index"> {{item}} </div> </div> ----me

vue滚动条监听，定位，回到顶部

weixin_42702731的博客

01-13

1831

在template标签下，定义一个div标签:<div class='className'></div> 定义div的样式，撑起滚动条: .className { height: 100%; position: absolute; top: 0; right: 0; bottom: 0; left: 0; overflow: auto; } 现在已经有...

vue的div滚动条自动到底部_vue 监听某个div垂直滚动条下拉到底部的方法

weixin_36179941的博客

01-13

2307

vue 监听某个div垂直滚动条下拉到底部的方法如下所示：this.$nextTick(() => {const el = document.querySelector('.act-not');const offsetHeight = el.offsetHeight;el.onscroll = () => {const scrollTop = el.scrollTop;const sc...

滚动加载数据

song_song0927的博客

05-04

209

监听滚动条滚动,加载数据

vue中监听页面滚动和监听元素滚动

奋斗的小猪

01-29

1599

监听页面滚动在生命周期mounted中进行监听滚动： mounted () { window.addEventListener('scroll', this.scrollToTop) }, 在方法中定义监听滚动执行的方法： scrollToTop() { var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop; console.log(scrollT

js监听div滚动条

qq_41792374的博客

10-18

5548

js监听div滚动条

vue 监听某个div滚动，获取滚动高度

撑起自己半边天

05-25

3086

vue 监听某个div滚动，获取滚动高度

vue项目中监听页面滚动事件

weixin_43502666的博客

03-15

1692

【代码】vue项目中监听页面滚动事件。

监听div滚动高度

IICOOM的博客

03-24

2150

前端开发经常会遇到监听滚动事件的情况，检测到页面滚动距离做一些操作。有时候也会监听一些容器的滚动如：div，与前者有一些差别，本文会先后介绍这两种情况如何实现。

vue2 div滚动条下拉到底部时触发事件(懒加载) 超级简易版本的懒加载

肥晨开发的学习之路

03-09

3926

通过监听div的scroll事件，可以获取滚动容器的相关属性，如滚动条的位置、可视区域的高度以及整个内容的高度。当滚动条到达底部时，可以执行相应的懒加载逻辑，比如加载更多数据。您好，我是肥晨。欢迎关注我获取前端学习资源，日常分享技术变革，生存法则；行业内幕，洞察先机。