vue監聽頁面中的某個div的滾動事件，並判斷滾動的位置

翀上雲霄發表於2022-03-17
Vue事件

在開發中常常會遇到這樣一個vue頁面，頁面分為左右兩部分，左邊是目錄樹，右邊是一個類名為xq-box的div，在xq-box中多個div上下並列佈局，每個div中的內容就對應著左邊目錄樹中的相應節點，現在的目標是，要監聽這個xq-box滾動事件，右邊一旦開始滾動，就要知道滾動到哪個子div，並讓左邊的目錄樹中對應的節點高亮顯示。要怎麼做呢？

1、首先，先寫好大概的頁面佈局，這裡要注意，右邊xq-box的子div要繫結"'xqItem'+序號"的id，為了下面用js能獲取到匹配的dom元素：

vue監聽頁面中的某個div的滾動事件，並判斷滾動的位置 
<template>
    <div class="container">
        <div class="left-box">
          <div class="menu-box">
            <div class="menu-title">
              <p>目錄</p>
            </div>
            <div
              class="menu-item"
              v-for="(menu, index) in menuList"
              :key="index"
              :class="{ 'active': menuActive === index }"
              @click="chooseMenu(menu.name, index)"
            >
              <img :src="menu.icon" class="menu-icon" />
              <p>{{ menu.name }}</p>
            </div>
          </div>
        </div>
        <div class="right-box">
          <div class="xq-box" ref="xqBox">
            <div
                class="xq-item"
                :id="'xqItem' + index"
                v-for="(item, index) in xqConList"
                :key="index"
              >
                 <!--這裡渲染出目錄內容-->
                 <div class="xq-item-name">
                    {{ item.name }}
                  </div>
                  <div class="xq-item-con">
                    {{ item.content }}
                  </div>
              </div>
          </div>
        </div>
    </div>
</template>
View Code

 2、然後，在css裡給xq-box高度，設定其超出能滾動：

<style lang="stylus" scoped>
  .right-box
      height 600px
      .xq-box
          height 100%
          overflow-y auto
<style>

3、接著，在計算屬性獲取到這個ref="xqBox"的dom元素，寫一個函式handleScroll()獲取滾動距離並判斷滾動到哪兩個子div之間，並在頁面渲染完後監聽這個xq-box的滾動事件。

export default {
  name: "menuList", 
  data() {
    return {
      menuActive: 0,  //左側高亮的item
      menuList: [],  //左側目錄樹
      xqConList: []  //右側目錄內容列表
    }
  },
  computed: {
    xqBox() {
      return this.$refs.xqBox;
    }
  },
  mounted() {
    this.$nextTick(() => {
      // //監聽這個dom的scroll事件
      // this.xqBox.onscroll = () => {
      //   console.log("on scroll");
      //   this.handleScroll();
      // };
      //監聽這個dom的scroll事件
      this.xqBox.addEventListener("scroll", this.handleScroll);
    });
  },
  methods: {
    handleScroll() {
      //獲取dom滾動距離
      const scrollTop = this.xqBox.scrollTop;
      //獲取可視區高度
      const offsetHeight = this.xqBox.offsetHeight;
      //獲取滾動條總高度
      const scrollHeight = this.xqBox.scrollHeight;
      //xqConList 為目錄內容列表
      for (let i = 0; i < this.xqConList.length - 1; i++) {
        let offset_before = this.$el.querySelector("#xqItem" + i).offsetTop;  //offsetTop: 獲取當前元素到其定位父級（offsetParent）的頂部距離
        let offset_after = this.$el.querySelector("#xqItem" + (i + 1))
          .offsetTop;

        //根據xqItem離頂部距離判斷滾動距離落在哪兩個item之間
        if (scrollTop >= offset_before && scrollTop < offset_after) {
          // console.log("offset", offset_before, offset_after, scrollTop);
          // console.log("scrollHeight", scrollTop, offsetHeight, scrollHeight);
          //判斷是否滾動到了底部
          if (scrollTop + offsetHeight >= scrollHeight) {
            // 把距離頂部的距離加上可視區域的高度 等於或者大於滾動條的總高度就是到達底部
            // console.log("已滾動到底部");
            if (this.menuActive < i) {
              this.menuActive = i;
            }
          } else {
            this.menuActive = i;
          }
          break;
        }
      }
    },
  }
};

 

經查詢得知，Vue元件在patch階段結束時會把this.$el賦值為掛載的根dom元素，我們可以直接使用$el的querySelector, querySelectorAll等方法獲取匹配的元素。因1中每個內容塊子div已經繫結id，所以此處可以用 this.$el.querySelector("#xqItem" + i) 獲取到每個子div。

還有一個要注意的是，這裡之所以要判斷是否滾動到了底部，是因為xq-box一旦滾動到底部，就可以看到最後幾個目錄對應的子div，此時的滾動距離scrollTop只會落在這最後幾個子div的第一個子div（序號即當前本次迴圈中的i）的離頂部距離位置上，這個時候如果左側目錄樹高亮的正好是這最後幾個目錄的其中任意一個，則無需更改高亮；但是如果此時 this.menuActive 的值還比最後幾個目錄的第一個子div的序號要小，即比本次迴圈的 i 要小，則需要更改為當前的 i 值。

4、如果要點選左邊目錄樹，右邊xq-box也要自動滾動到相應的目錄內容，則要增加以下方法：

chooseMenu(name, index) {
      this.menuActive = index;
      // //可以用scrollIntoView
      // document.querySelector("#xqItem" + index).scrollIntoView({
      //   block: "start",
      //   behavior: "smooth"
      // });
      let offsetTop = this.$el.querySelector("#xqItem" + index).offsetTop;
      console.log("#xqItem" + index + " offsetTop: " + offsetTop);
      this.xqBox.scrollTop = this.$el.querySelector(
        "#xqItem" + index
      ).offsetTop;
},

這樣，“監聽這個xq-box滾動事件，右邊一旦開始滾動，就要知道滾動到哪個子div，並讓左邊的目錄樹中對應的節點高亮顯示”這個功能便實現了。

 

相關文章