vue监听滚动 距离

最新推荐文章于 2025-05-24 08:00:30 发布
最新推荐文章于 2025-05-24 08:00:30 发布
阅读量524 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/renlihui8617/article/details/129988307
该文章描述了一个Vue组件的方法，通过在`mounted`生命周期钩子中添加滚动事件监听器`handleScroll`，当滚动位置超过361像素时，设置`isFixed`为`true`，实现元素固定定位。这个机制常用于页面头部导航的固定效果。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

 mounted() {
    window.addEventListener('scroll', this.handleScroll, true)
  },
    handleScroll(e) {
      const scrollTop = e.target.scrollTop
      if (scrollTop > 361) {
        this.isFixed = true
        console.log('固定')
      } else {
        this.isFixed = true
      }
    },
任立辉
关注
vue监听滚动事件，实现某元素随着滚动条滚动固定距离顶部的某个位置（元素的top值实时变化）
日常笔记/总结/系列知识梳理
06-15 3万+
HTML <div class="fixed" id="searchBar"> </div> CSS fixed { position: fixed; bottom: 100px; top:
「VUE架构」Vue监听滚动事件响应索引及滚动距离锚点的控制
拥抱AI Design
05-16 2429
本文主要介绍vue当前页面滚动时，索引的自动切换及滚动距离锚点的控制。同时也解决了vue切换路由后上一个页面监听scroll滚动事件会在新页面报错问题。 一、直接上逻辑代码，DOM页面和样式不在一一赘述。 var doTop, // 距离顶部的距离 noScroll = false; // 是否在滚动的判断 mounted() { this.$nextTick(() ......
vue监听页面滑动距离
m0_59390994的博客
06-24 1165
vue监听不到页面滚动距离时用到的方法
Vue2监听网页滚动条scrollbar滚动scrollEvent事件，并通过滚动距离判断是否要触发显示或隐藏或其他行为
最新发布
我驾驶汽车从不是为了从A点到达B点，我喜欢去感受汽车，与之交流，与之融为一体。
05-24 502
【代码】Vue2监听网页滚动条scrollbar滚动scrollEvent事件，并通过滚动距离判断是否要触发显示或隐藏或其他行为。
vue中实现滚动加载页面，监听滚动距离等
m0_61452987的博客
09-20 2193
1、用element框架自带的函数监听滚动条。 具体方法是在div中设置最大高度max-height=xxx，将v-infinite-scroll="loadList"放在div上，当滚轮滑到最下面时，触发loadList函数，进而实现加载下一页。 <template> <div id="embedContainer" class="app-main" v-loading="loading"> <div> <div cl
vue 监听滚动条上移下移 并监听移动距离
weixin_55201902的博客
11-18 1378
【代码】vue 监听滚动条上移下移 并监听移动距离。
vue 监听滚动条（获取滚动条距离底部距离）
m0_56363729的博客
01-24 2243
参考链接：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
vue 监听某个div垂直滚动条下拉到底部的方法
10-18
对于Vue开发者来说，监听滚动条事件并执行相关代码，常用于实现分页加载、数据预取等场景。 在文档中提到的代码片段中，利用了JavaScript原生方法`document.querySelector`来选取指定的元素，这里假设我们选取的...
vue监听 vue实时监听窗⼝滚动条
07-05
1. **监听滚动事件** 在Vue组件的`mounted`生命周期钩子中，我们可以添加事件监听器来监听窗口的滚动事件。这是因为`mounted`阶段表示组件已经被挂载到DOM中，此时可以安全地操作DOM和添加事件监听器。代码如下： ...
VUE实时监听元素距离顶部高度的操作
10-15
本文档介绍了一个特定的技术实现点：如何在Vue中实时监听某个元素距离页面顶部的高度变化。这一操作在网页开发中非常有用，比如需要根据页面的滚动情况动态更新某些元素的样式或行为。 文档首先提出了一个疑问：...
基于vue监听滚动事件实现锚点链接平滑滚动的方法
11-26
在Vue中，可以使用`mounted`生命周期钩子监听滚动事件： ```javascript mounted() { const _this = this; setTimeout(() => { _this.currentStick(); // 其他滚动事件相关的处理 }); }, methods: { ...
Vue中如何获取滚动条滚动的距离
LEElcg的博客
07-29 4609
这是一篇关于如何在vue中如何获取滚动条的文章
Vue中监听滑动条移动距离
qq_44625641的博客
04-07 1492
methods:{ handleScroll() { this.scrollHeigh =this.$refs.scorll_top.getBoundingClientRect().left conlog.log('移动了' , this.scrollHeigh) } //监听 mounted: function () { document.querySelector(".menu").addEventListener('scroll', this.handleScrol
vue 计算滚动距离顶部距离 改变背景色及文字
Mr_zrh的博客
08-03 423
【代码】vue 计算滚动距离顶部距离 改变背景色及文字。
监听页面滚动距离并固定导航栏，且导航栏随页面横向滚动而滚动
weixin_50166856的博客
04-13 1077
1.监听页面滚动距离 mounted() { window.addEventListener("scroll", this.handleScroll,true) }, 2.固定导航栏，且导航栏随页面横向滚动而滚动 methods: { handleScroll (e) { let scrollY = e.target.scrollTop; //获取导航来距离顶部距离 这个方法管用 let scrollX = e.target.
vue 监听页面滚动 实现元素在页面滚动到一定距离时显示
sanrenxingqg的博客
04-22 5780
<template> <div id="app"> <div v-if="nav_show">要显示的元素</div> </div> </template> <script> export default { name: "app", data() { return { nav_show：false }; }, methods: { handleScroll.
vue3监听滑动 监听距离顶部距离
ssorth的博客
07-09 1033
vue3监听滑动 监听距离顶部距离
VUE滚动条事件，监听滚动条位置，控制按钮显示隐藏
JPQLGZPW的博客
03-07 1496
原因：vue封装组件后，常常是在组件里面继续轮滑，而document.documentElement.scrollTop拿到的是最外层浏览器的轮滑高度，所有一直是0。如果不加true,那么这个事件就会在冒泡阶段执行导致失效. 默认为false,改为true的时候它就会在捕获阶段执行。如果滚动条事件失效有可能是因为没有添加true的原因，这里true的作用是，
Vue3监听滚动条距离顶部
02-19
### Vue3 中实现监听页面滚动事件并获取 `scrollTop` 值 为了在 Vue3 中有效地监听页面滚动事件并获取滚动条距离顶部的距离 (`scrollTop`)，可以采用如下方法： #### 使用组合式 API (Composition API) ```javascript import { ref, onMounted, onBeforeUnmount } from 'vue'; export default { setup() { const topNavBg = ref({ backgroundColor: '' }); const scrollTop = ref(0); function handleScroll() { scrollTop.value = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop; console.log(scrollTop.value, '滚动距离'); // 可以在此处根据滚动位置改变样式或其他逻辑操作 if (scrollTop.value > 100) { topNavBg.value.backgroundColor = '#fff'; } else { topNavBg.value.backgroundColor = ''; } } onMounted(() => { window.addEventListener('scroll', handleScroll); }); onBeforeUnmount(() => { window.removeEventListener('scroll', handleScroll); }); return { topNavBg, scrollTop }; }, }; ``` 此代码片段展示了如何利用 Vue3 的 Composition API 来设置响应式的属性 `topNavBg` 和 `scrollTop`。当组件挂载时添加滚动事件监听器，在卸载前移除该监听器以防内存泄漏。 对于选项式 API (Options API)，则可以直接基于给定的引用进行调整[^1]： ```javascript export default { data() { return { topNavBg: { backgroundColor: '' }, scrollTop: 0 }; }, mounted() { window.addEventListener('scroll', this.handleScroll); // 监听页面滚动 }, methods: { handleScroll() { this.scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop; console.log(this.scrollTop, '滚动距离'); // 根据滚动位置修改导航栏背景颜色 if (this.scrollTop > 100) { this.topNavBg.backgroundColor = '#fff'; } else { this.topNavBg.backgroundColor = ''; } } }, beforeDestroy() { window.removeEventListener('scroll', this.handleScroll); // 移除滚动监听 } } ``` 上述两种方式都可以有效解决无法监听到页面滚动的问题，并能够正确获取 `scrollTop` 的值来执行相应的业务逻辑处理。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值