vue监听滚动条页面滚动动画示例代码
作者：贺包蛋
Vue是一套用于构建用户界面的渐进式框架,与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用,下面这篇文章主要给大家介绍了关于vue监听滚动条页面滚动动画的相关资料,需要的朋友可以参考下
以页面底部的“回到顶部”功能为例，滚动动画的实现思路是，当点击按钮时，获取当前滚动条的位置，调用定时器函数，每个时间间隔对滚动条的位置递减，直至减小到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">
<!-- href="/" rel="external nofollow" rel="external nofollow" 跳转到首页 -->
<li><a href="/" rel="external nofollow" rel="external nofollow" >HOME</a></li>
<!-- href="/#about" rel="external nofollow" rel="external nofollow" 跳转到首页的id为about的元素位置 -->
<li><a href="/#about" rel="external nofollow" rel="external nofollow" >ABOUT</a></li>
<li><a href="/#paper" rel="external nofollow" >PAPER</a></li>
<li><a href="/#team" rel="external nofollow" >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>标签的默认样式
主要是设置 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监听滚动条页面滚动动画的文章就介绍到这了,更多相关vue监听滚动条页面滚动动画内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！