楼梯滚动效果
<template> <div class="box"> <ul> <li v-for="(item, inx) in 10" :key="inx" :class="[`lou_${inx}`, { 'active': inx == current }]"> <a @click="navCheck(inx)">导航{{ inx }}</a> </li> </ul> <div class="content" ref="scrollview" @scroll="onScroll"> <section :id="[`lou_${inx}`]" v-for="(item, inx) in 10" :key="inx"> <h6>标题{{ inx }}</h6> <div> <p>内容内容内容内容内容内容内容内容内容内容内容</p> <p>内容内容内容内容内容内容内容内容内容内容内容</p> <p>内容内容内容内容内容内容内容内容内容内容内容</p> <p>内容内容内容内容内容内容内容内容内容内容内容</p> </div> </section> </div> </div> </template> <script> export default { data() { return { current: 0, isNav: false, timer: null } }, beforeDestroy() { clearTimeout(this.timer) }, methods: { // 导航点击 navCheck(inx) { this.current = inx this.isNav = true clearTimeout(this.timer) this.timer = setTimeout(() => { this.isNav = false }, 1000) let lou = `#lou_${inx}` document.querySelector(lou).scrollIntoView({ behavior: "smooth",
// block: 'center', // 滑动到视图中间位置 }) }, // 内容区域滚动 onScroll() { let scrollTop = this.$refs['scrollview'].scrollTop; // 获取所有锚点元素 const AllNav = document.querySelectorAll('.content section') // 获取所有锚点元素的 offsetTop const offsetTopArr = [] AllNav.forEach(item => { offsetTopArr.push(item.offsetTop - 68) }) for(let i = 0; i < offsetTopArr.length; i++) { // 内容已经完全不可见 if(scrollTop >= offsetTopArr[i]) { // 导航点击时,不滚动设置 if(!this.isNav) { this.current = i } } } }, }, } </script> <style lang="scss" scoped> .box { display: flex; height: 600px; ul { width: 80px; padding-top: 30px; li { line-height: 36px; &.active { background: rgba(0,102,255,0.1); } &:hover{ background: rgba(0,102,255,0.1); } a{ display: block; padding: 0 16px; } } } .content{ width: 400px; overflow-y: auto; box-sizing: border-box; section{ padding: 30px 0; border-bottom: 1px solid #ddd; h6{ font-size: 20px; } > div{ margin-top: 24px; color: #595959; line-height: 24px; } } } } </style>