<template>
<div>
<div class="div">
<ul class="navgator">
<li
class="navgatorLi"
:class="{ isActive: index === navgatorIndex }"
@click="handleLeft(index)"
v-for="(item, index) in navgator"
:key="item"
>
{{ item }}
</li>
</ul>
<ul class="rightList">
<li :id="'id' + index" v-for="(item, index) in listBox" :key="item">
{{ item }}
</li>
</ul>
</div>
</div>
</template>
<script>
export default {
data() {
return {
navgator: ["列表A", "列表B", "列表C", "列表D"],
navgatorIndex: 0,
listBox: ["A", "B", "C", "D"],
listBoxState: true, //点击导航栏时,暂时停止监听页面滚动
};
},
created() {},
mounted() {
let timeId;
window.addEventListener(
"scroll",
() => {
// 页面滚动停止100毫秒后才会执行下面的函数。
clearTimeout(timeId);
timeId = setTimeout(() => {
this.scrollToTop();
console.log("执行完了哦");
}, 100);
},
true
);
},
methods: {
// 点击导航菜单,页面滚动到指定位置
handleLeft(index) {
this.navgatorIndex = index;
this.$el.querySelector(`#id${index}`).scrollIntoView({
behavior: "smooth", // 平滑过渡
block: "start", // 上边框与视窗顶部平齐。默认值
});
this.listBoxState = false;
let timeId;
clearTimeout(timeId);
timeId = setTimeout(() => {
this.listBoxState = true;
}, 200);
},
// 监听页面元素滚动,改变导航栏选中
scrollToTop() {
// 获取视窗高度
var domHight = document.body.offsetHeight;
// dom滚动位置
var scrollTop =
window.pageYOffset ||
document.documentElement.scrollTop ||
document.body.scrollTop;
if (this.listBoxState) {
//作用是点击导航栏时,延迟这里执行。
this.listBox.map((v, i) => {
// 获取监听元素距离视窗顶部距离
var offsetTop = document.getElementById(`id${i}`).offsetTop;
// 获取监听元素本身高度
var scrollHeight = document.getElementById(`id${i}`).scrollHeight;
// 如果 dom滚动位置 >= 元素距离视窗距离 && dom滚动位置 <= 元素距离视窗距离+元素本身高度
// 则表示页面已经滚动到可视区了。
if (scrollTop >= offsetTop && scrollTop <= offsetTop + scrollHeight) {
// 导航栏背景色选中
this.navgatorIndex = i;
}
});
}
},
},
};
</script>
<style lang='less' scoped>
.div {
width: 100%;
background: #ededed;
}
.navgator {
width: 200px;
position: fixed;
top: 0;
.navgatorLi {
width: 100%;
height: 1rem;
display: flex;
justify-content: center;
align-items: center;
border: 1px solid #ccc;
border-top: none;
}
.isActive {
color: #fff;
background: darkseagreen;
}
}
.rightList {
width: 560px;
margin-left: 200px;
li {
width: 100%;
height: 400px;
display: flex;
justify-content: center;
align-items: center;
border: 1px solid #ccc;
}
}
</style>
vue 楼层跳跃
最新推荐文章于 2024-07-25 09:37:37 发布