vue 點擊元素滾動到指定位置

 

 

 

<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: 10rem;
      display: flex;
      justify-content: center;
      align-items: center;
      border: 1px solid #ccc;
    }
  }
</style>