Vue 實現滾動樓層導航定位（可實現監聽頁面滾動和監聽某元素滾動）

實現思路：

在vue中使用v-for動態渲染樓層和樓層導航，然後使用原生JavaScript實現樓層導航動態更新與樓層滾動定位

１、頁面初始化時定位首個樓層

２、頁面滾動樓層自動定位到相應的樓層導航並高亮顯示

３、鼠標點擊樓層導航時，當前樓層導航高亮顯示，並且頁面自動滾動到相應的樓層

效果

頁面佈局  和 style

 .floor-nav {
    // position: fixed;
    // top: 180px;
    // left: 350px;
    // z-index: 10;
    float: left
  }
  .nav-list {
    width: 80px;
    padding: 0;
    display: inline-block;
    text-align: center;
    background-color: #f8f8f8;
    margin-top: 0;
    margin-right: 5px
  }
  .nav-list-item {
    display: inline-block;
    width: 100%;
    height: 100%;
    line-height: 48px;
    vertical-align: middle;
    align-self: center;
    border-bottom: 1px solid #fff;
    cursor: pointer;
    background: #067749 !important;
    color: #FFF;
    font-size: 14px;
  }
  .nav-list-item.active,
  .nav-list-item:hover {
    color: rgb(112, 243, 255);
  }
  .floor-item {
    width: 100%;
    margin: 60px auto;
    min-height: 300px;
    text-align: center;
    color: #FFF;
    background-color: #404040;
  }

 

數據 放在data中

 element: {
          nav_item: null,
          floor_item: null
        },
        timer: null,
        floorNavList: [{
          id: 1,
          name: '主訴現病史'
        }, {
          id: 2,
          name: '既往史'
        }, {
          id: 3,
          name: '過敏史'
        }, {
          id: 4,
          name: '診斷'
        }, {
          id: 5,
          name: '處方類型'
        }, {
          id: 6,
          name: '檢驗'
        }, {
          id: 7,
          name: '檢查'
        }, {
          id: 8,
          name: '手術'
        }, {
          id: 9,
          name: '治療'
        }, {
          id: 10,
          name: '用血'
        }, {
          id: 11,
          name: '會診'
        }, {
          id: 12,
          name: '病歷文書'
        }],

滾動事件監聽 

 （1）監聽頁面滾動

    mounted () {
        this.element = {
          nav_item: document.getElementsByClassName('nav-list-item'),
          floor_item: document.getElementsByClassName('floor-item')
        }
        this.element.nav_item[0].classList.add('active')
        window.addEventListener('scroll', this.floorSrcollEventListener)
      },
      beforeDestroy () { 
        window.removeEventListener('scroll', this.floorSrcollEventListener)
      },

 

（2）監聽元素滾動

   tips：需要監聽的這個元素需要擁有固定的高度

  <div style="overflow-y:auto;width: calc(100% - 85px);float: left;" :style="{'height': height + 'px'}" id="floorWarp"   @scroll="floorSrcollEventListener">     

    mounted () {
        this.element = {
          nav_item: document.getElementsByClassName('nav-list-item'),
          floor_item: document.getElementsByClassName('floor-item')
        }
        this.element.nav_item[0].classList.add('active')
      },
      beforeDestroy () { 
        window.removeEventListener('scroll', this.floorSrcollEventListener)
      },

     tips：如果頁面進行了keep-alive  beforeDestroy 就要換成 deactivated

原生js部分

export default {
  methods: {
     /**
     * 監聽窗口滾動樓層導航動態定位
     */
      floorSrcollEventListener() {
        const { nav_item, floor_item } = this.element
        const window_scrollTop = this.$el.querySelector('#floorWarp').scrollTop
        for (let i = 0, len = floor_item.length; i < len; i++) {
          const floor_offsetTop = floor_item[i].offsetTop - floor_item[0].offsetTop
          if (window_scrollTop >= floor_offsetTop) {
            for (let n = 0, len = nav_item.length; n < len; n++) {
              const current_classList = nav_item[n].classList
              i === n
                ? current_classList.add('active')
                : current_classList.remove('active')
            }
          }
        }
      },
      /**
     * 設置樓層導航事件驅動方法
     * @param {Number} index  樓層下標
     */
      setFloorNavMountClick(index) {
        const { floor_item } = this.element
        const floor_offsetTop = floor_item[index].offsetTop
        const window_scrollTop = this.$el.querySelector('#floorWarp').scrollTop
        const timer = {
          step: 60,
          times: 16,
          FLOOR_OFFSETTOP: floor_offsetTop
        }
        if (window_scrollTop > floor_offsetTop) {
          this.setFloorScrollArrowUp(timer)
        } else if (window_scrollTop === floor_offsetTop) {
          return false
        } else {
          this.setFloorScrollArrowDown(timer)
        }
      },
      /**
     * 設置樓層向上滾動
     * @param {Object} timer 定時器配置
     */
      setFloorScrollArrowUp(timer) {
        clearInterval(this.timer)
        this.timer = setInterval(() => {
          const window_scrollTop = this.$el.querySelector('#floorWarp').scrollTop
          if (window_scrollTop <= timer.FLOOR_OFFSETTOP) {
            this.$el.querySelector('#floorWarp').scrollTop = timer.FLOOR_OFFSETTOP
            clearInterval(this.timer)
          } else {
            this.$el.querySelector('#floorWarp').scrollTop = window_scrollTop - timer.step
          }
        }, timer.times)
      },
      /**
     * 設置樓層向下滾動
     * @param {Object} timer 定時器配置
     */
      setFloorScrollArrowDown(timer) {
        clearInterval(this.timer)
        this.timer = setInterval(() => {
          const window_scrollTop = this.$el.querySelector('#floorWarp').scrollTop
  
          if (window_scrollTop >= timer.FLOOR_OFFSETTOP) {
            this.$el.querySelector('#floorWarp').scrollTop = timer.FLOOR_OFFSETTOP
            clearInterval(this.timer)
          } else {
            if (window_scrollTop === 2095) {
              clearInterval(this.timer)
              return false
            }
            this.$el.querySelector('#floorWarp').scrollTop = window_scrollTop + timer.step
          
          }
        }, timer.times)
      },
  }
}