点击一个元素滚动到页面某个位置,可以简单通过锚点和scrollTop方法来实现。
但在此处我们通过scrollTo方法来实现,再设置滚动行为smooth平滑滑动,让过程更加顺畅,话不多话,马上上代码!
<template>
<div class="wrap">
<div class="pou">
<div class="blo"
:class="{'active': active1 === index}"
v-for="(item, index) in list" :key="index"
@click="clickHandle(item.option, index)"
><span>{{item.values}}</span></div>
</div>
<div>
<div ref="select" style="height: 500px">
<span style="color: #f0f;">精选内容:</span>
Lorem ipsum dolor sit amet consectt!
</div>
<div ref="comduce" style="height: 800px">
<span style="color: #f0f;">推荐内容:</span>
Lorem ipsum dolor sit amet consectetur o?
</div>
<div ref="normal" style="height: 900px">
<span style="color: #f0f;">普通内容:</span>
Lorem ipsum dolor sit, amet consectetur adipisicing elrum at.
</div>
</div>
</div>
</template>
data () {
return {
list: [],
active1: 0
}
},
mounted () {
this.list = [
{
values: '精选',
active: true,
option: this.$refs.select.offsetTop
},
{
values: '推荐',
active: false,
option: this.$refs.comduce.offsetTop
},
{
values: '普通',
active: false,
option: this.$refs.normal.offsetTop
}
]
}
渲染完成后,加入点击事件!
clickHandle (top, index) {
this.active1 = index
window.scrollTo({
top: top,
behavior: 'smooth'
})
现在已经实现点击滚动了, 然而我们加入元素选中状态后,还可以实现滚动到哪个位置选中状态到哪个元素!
首先在mounted生命周期里监听页面滚动事件
window.addEventListener('scroll', this.handleScroll, false)
然后在定时器里翻转list数组后遍历数组,当卷上去的高度小于等于scrollTop高度时,计算出最后的元素选中状态,最后再赋值给active1
handleScroll () {
const aa = document.documentElement.scrollTop
setTimeout(() => {
const arr = [...this.list].reverse()
for (var i = 0; i < arr.length; i++) {
if (arr[i].option <= aa) {
this.active1 = arr.length - 1 - i
break
}
}
}, 200)
this.active1 = this.active
}
最后一步千万别忘了移除监听滚动事件哟!
destroyed () {
window.removeEventListener('scroll', this.handleScroll, false)
}
再最后贴上css和效果图
<style lang="scss">
.wrap {
background: #ffcdff;
padding: 0 20px;
.pou {
position: fixed;
bottom: 60px;
right: 10px;
text-align:center;
z-index:2;
background: #dad8d8;
.blo {
padding: 9px;
&:hover, &.active {
background: #f0f;
padding: 9px;
color: #fff;
}
}
}
}
</style>