vue 监听dom（vue 监听滚动条页面滚动动画）

时间2025-09-19 15:51:11分类IT科技浏览6647

导读：以页面底部的“回到顶部”功能为例，滚动动画的实现思路是，当点击按钮时，获取当前滚动条的位置，调用定时器函数，每个时间间隔对滚动条的位置递减，直至减小到0，清除定时器，即可回到页面顶部。...

以页面底部的“回到顶部 ”功能为例，滚动动画的实现思路是，当点击按钮时，获取当前滚动条的位置，调用定时器函数，每个时间间隔对滚动条的位置递减，直至减小到0 ，清除定时器，即可回到页面顶部。

当滚动条没有离开首页的一个屏幕高度时，“回到顶部 ”按钮应设为不可见，可以监听当前滚动条的位置，小于一个屏幕高度时，将按钮的v-show属性设为false，大于一个屏幕高度时，则设为true 。

代码示例

<template> <div id="index"> <div class="toTop" v-show="showTop" @click="toTop"> <img src="../assets/img/angle-square-up.png" alt="" width="35px" /> </div> </div> </template> <script> export default { data() { return { showTop: false, }; }, mounted() { // 添加监听事件 window.addEventListener("scroll", this.scrolling); }, methods: { // 监听事件 scrolling() { let current = document.documentElement.scrollTop || document.body.scrollTop; let vh = window.innerHeight; if (current >= vh) { this.showTop = true; } else { this.showTop = false; } }, // 点击事件 toTop() { // 获取当前滚动条的位置 let top = document.documentElement.scrollTop || document.body.scrollTop; // 滚动动画 const timeTop = setInterval(() => { document.body.scrollTop = document.documentElement.scrollTop = top -= 50; if (top <= 0) { clearInterval(timeTop); } }, 10); }, }, }; </script> <style lang="scss" scoped> #index { .toTop { position: fixed; right: 20px; bottom: 20px; cursor: pointer; width: 35px; height: 35px; z-index: 2; opacity: 0.3; } } img:hover { opacity: 0.5; } </style>

获取滚动条当前位置

document.documentElement.scrollTop || document.body.scrollTop

获取屏幕高度

window.innerHeight

弄懂了这个原理之后，顶部导航条的实现就十分简单了，如果不想写滚动动画的话，在<a>标签的href属性中填入目标跳转位置的元素的id ，就可以非常方便的直接跳转。

导航条如图

代码示例 <template> <div id="navigation"> <ul class="part1"> <li>LOGO</li> </ul> <ul class="part2">  <li><a href="/">HOME</a></li>  <li><a href="/#about">ABOUT</a></li> <li><a href="/#paper">PAPER</a></li> <li><a href="/#team">TEAM</a></li> </ul> </div> </template> <style lang="scss" scoped> #navigation { width: 94vw; height: 60px; margin: 0 auto; // 弹性布局 display: flex; justify-content: space-between; align-items: center; .part2 { // 弹性布局 display: flex; justify-content: center; align-items: center; } li { width: 100px; height: 40px; line-height: 40px; font-weight: bold; a:link { color: #8e9eab; } a:visited { color: #8e9eab; } a:hover { color: #4f4f4f; } a:active { color: #4f4f4f; } } } </style>

插个题外话，如何优雅地修改标签的默认样式

主要是设置 a:link a:visited a:hover a:active 这几个css属性

修改前

修改后

附上代码 a { // 清除默认下划线 text-decoration: none; } // 超链接初始样式 a:link { color: #8e9eab; } // 超链接被访问后的样式 a:visited { color: #8e9eab; } // 鼠标悬停时的样式 a:hover { color: #4f4f4f; } // 点击超链接时的样式 a:active { color: #8e9eab; }

ps：

a:hover 必须在 a:link 和 a:visited 之后

a:active 必须在 a:hover 之后

vue 监听dom（vue 监听滚动条 页面滚动动画）

vue 监听dom（vue 监听滚动条页面滚动动画）