vue监听scroll事件

最新推荐文章于 2024-05-22 13:52:22 发布
最新推荐文章于 2024-05-22 13:52:22 发布
阅读量3.1k 收藏
点赞数 2
分类专栏： vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/G_X73/article/details/89851792
版权

很小的功能，记录一下

mounted() {
	window.addEventListener('scroll', this.handleScroll, true)
},
methods: {
	handleScroll: function() {
      	console.log(document.documentElement.scrollTop || document.body.scrollTop)
    }
}
G_大侠
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue监听scroll的坑的解决方法
01-19
最近开始用vue写个小项目，踩了不少坑，这里记录下爬坑过程，给有同样经历的人帮助。 问题 今天想在vue的项目里面用下拉加载，然后就直接写了: 但是我发现我切换路由以后依旧其他页面也触发了scrollHandler函数，...
vue @scroll 事件
刘泽海的博客
06-22 772
vue 的 scroll 事件 做首页按需加载的时候滚动条滚动到底部之后加载 由于如果绑定在window上，那么路由切换之后，事件依然会被触发，所以在div元素上绑定 (如果绑定在window上，那么在导航守卫里，路由离开的时候解绑就行了，一样可以实现功能） 在元素标签上直接绑定 scroll 事件 <div class="home-test" @scroll="scrollGet($event)"> ... </div> 如果发现事件无效，那么可能div...
vue @scroll 监听滚动条事件
热门推荐
chen_sheng_le的博客
06-06 2万+
vue @scroll 监听滚动条事件 为啥要使用 @scroll 监听滚动条事件 没用在vue.js 开发前 我们监听滚动条事件都是在window挂监听事件 例如:window.onscroll = function , 不是说vue.js不能这样写, 只是这样写不好 这些必须在这个页面销毁时 清除这个事件 不然的话就会在全局监听,用原生 window监听可能是大家最熟悉的方法 .可vue.js 给我提供了@scroll 这个方法用来处理滚动条监听它不香吗??? 好了不多BB直接将上干货 使用@scrol
前端开发攻略---用Vue实现无限滚动的几种方法
最新发布
nibabaoo的博客
05-22 2494
用vue实现无限滚动
vue中使用原生js自定义事件监听
xiaohuihui_z的博客
09-22 1753
vue项目中引入外部js 需要通过外部js触发vue组件执行某些事件 JS中，最简单的创建事件方法，是使用Event构造器： 事件的定义 var myEvent = new Event(‘event_name’); 但是为了能够传递数据，就需要使用 CustomEvent 构造器： var myEvent = new CustomEvent(‘event_name’, { detail:{ data:‘要传输的值’ }, }); 事件的注册 //假设listener注册在window对象上 window.a
Div 高度、滚动条距 Div 顶部偏移量、Div 中文档总高度
蚩尤后裔-汪茂雄
11-27 5891
目录 示例图说明 编码示例 回到顶/底部 消息区自动滚动到底部 示例图说明 如上图所示，假设橙色表示滚动条，蓝色框表示 div 区域，黑色区域表示看不到的文档部分，高度说明如下： B：表示 div 元素高度，div 的高度不会随着内容的编号而编号，与有没有出现滚动条无关，只与自己的 height 属性有关 A：表示 div 内文档高度，当没有出现滚动条时，A文档高度...
vue监听滚动条事件
愤怒的苹果ext的博客
09-23 1万+
【代码】vue监听滚动条事件。
vue使用@scroll监听滚动事件时，@scroll无效问题的解决方法详解
12-13
本文实例讲述了vue使用@scroll监听滚动事件时，@scroll无效问题的解决方法。分享给大家供大家参考，具体如下： 在网上看了一下vue中监听滚动条滚动事件，清一色的使用document.addEventListener('scroll',function()...
vue监听滚动事件实现滚动监听
11-26
在vue中实现滚动监听和原生js无太大差异，下面是一个简单的demo，可在控制台查看结果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title&...
使用vue.js在页面内组件监听scroll事件的方法
12-29
思路：scroll在哪儿个组件内，就在获取那个dom元素。网上好多思路是 window.addEventListener(scroll, function(){ console.log('scrolling'); }); 这是监听不到的！如果你整个网页可以滑动，或许还可以试试！ ...
Vue监听页面区域scroll滚动条方法，实现区域内某元素吸顶效果
XINGZI前端程序猿的博客
10-11 4896
Vue监听区域滚动条事件，实现简易元素吸顶效果
vue3-element-admin（标签页缓存）
weixin_43400431的博客
06-14 1896
admin的标签页缓存以及设置 网址：vue3-element-admin
scroll滚动事件如何监听页面是否滚动到底部
m0_70015558的博客
07-07 3983
监听是否滚动到底部多数应用在加载更多之类的功能。话不多说，直接上菜。考虑vue渲染规则 需要在元素渲染后执行scroll监听 否则获取不到对应dom节点 所以需要配合使用 $nextTick()cont是监听区域，‘scroll’是添加事件，this.scroll是方法。 scroll判断是否到底部 如果没有要加载数据了，就可以把scroll事件移除了 这就是监听是否滚动到底部的全部内容了。描述如有错误，欢迎指正！.........
vue动态菜单及tag切换
xy19950125的博客
11-12 5958
刚刚接触项目的小伙伴 几乎都接触不到这一块的 因为入职 公司要么有骨干 要么是现有项目维护 所以 对于动态菜单 很好奇 今天带着小伙伴们一起来看看吧 可能有些人接触过 只是看看别人写的代码 觉得都没有问题没有实际动手去做过 这就应对了那句 “看花容易绣花难” 其实我开始的时候 也是这种心理 直到我自己动手的时候 发现里面有很多坑 如果不涉及到tag的切换 估计看看element官网就知道了 关键就是带有tag切换 导致很多小伙伴无从下手 现在很多公司的项目都是基...
js监听页面或元素scroll事件，滚动到底部或顶部
彭世瑜的博客
06-24 2万+
基本原理： 监听页面滚动 同理，也可以监听元素的滚动 判断触底需要注意的点：
【教程】网页到达底部显示返回顶部一：原生JavaScript方法
hifhf的专栏
05-22 151
测试浏览器：IE8，chromejs代码//滚动条在Y轴上的滚动距离 functiongetScrollTop(){ 　　varscrollTop=0,bodyScrollTop=0,documentScrollTop=0; 　　if(document.body){ 　　　　bodyScrollTop=document.body.scrol...
scroll 监听
yezi_Z的博客
06-11 624
问题描述 ： 项目中使用了better-scroll库，同时想监听scroll事件的时候，发现无法监听到。 setTimeout(()=>{ this.initScroll(); this.scroll.on('scroll', ()=>{console.log('scroll' , )}, false) this.scrol...
vue中使用Scroll事件
weixin_43837268的博客
11-30 3946
一.固定头部导航栏 1.【vue的touch事件】 &lt;div class="flex-wrapper" ref="scrollmain" @touchstart='touchstart' @touchmove='touchmove' @touchend='touchend'&gt; 2.【Method】 touchmove(e){ var scollTop=0...
vue监听滚动事件 实现元素吸顶
沫沫酱
11-18 406
添加滚动监听事件： mounted () { window.addEventListener('scroll', this.handleScroll) }, 页面销毁需要取消监听： destroyed(){ window.removeEventListener('scroll',this.handleScroll) } 使用： <template> ...
vue-seamless-scroll 监听滚动事件
09-13
要在 `vue-seamless-scroll` 组件中监听滚动事件，可以使用 `@scroll` 指令来实现。在组件上添加 `@scroll` 指令，并将其绑定到一个方法上，该方法将会在滚动事件触发时被调用。 以下是一个示例代码： ```vue <template> <div class="scroll-container" ref="scrollContainer"> <vue-seamless-scroll :data="scrollData" :speed="scrollSpeed" @scroll="handleScroll"> <template slot-scope="{ item }"> <div class="item">{{ item }}</div> </template> </vue-seamless-scroll> </div> </template> <script> export default { data() { return { scrollData: ['Item 1', 'Item 2', 'Item 3', 'Item 4'], // 滚动的数据 scrollSpeed: 50 // 滚动的速度 }; }, methods: { handleScroll() { // 在这里处理滚动事件 console.log('滚动事件触发'); } }, mounted() { // 获取滚动容器的 DOM 元素并添加滚动事件监听器 const scrollContainer = this.$refs.scrollContainer; scrollContainer.addEventListener('scroll', this.handleScroll); }, beforeDestroy() { // 在组件销毁前，移除滚动事件监听器 const scrollContainer = this.$refs.scrollContainer; scrollContainer.removeEventListener('scroll', this.handleScroll); } }; </script> <style scoped> .scroll-container { width: 300px; height: 200px; overflow-y: auto; } .item { height: 50px; line-height: 50px; text-align: center; } </style> ``` 在上面的示例中，我们在 `vue-seamless-scroll` 组件的外层包裹了一个 `div`，并给其添加了一个类名为 `scroll-container` 的样式。 我们通过 `ref` 引用获取到这个滚动容器的 DOM 元素，并在 `mounted` 钩子函数中使用 `addEventListener` 方法添加了滚动事件监听器，监听器的回调函数为 `handleScroll`。 在 `handleScroll` 方法中可以处理滚动事件的逻辑，例如输出一个日志。同时，在 `beforeDestroy` 钩子函数中使用 `removeEventListener` 方法移除了滚动事件监听器，避免组件销毁后仍然继续监听滚动事件。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值