welcome

楼梯滚动效果

<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>

 

posted @ 2023-08-03 14:15  一首弦曲献仙音  阅读(12)  评论(0编辑  收藏  举报
//博文图片放大缩小 //飘桃花效果