滑动到指定位置对应的章节菜单高亮

滑动到指定位置对应的章节菜单高亮

• 需求中我们经常遇到点击章节菜单跳转到对应的章节

• 但是他们也需要滑动到对应的锚点位置来反显对应的章节菜单高亮

• 以下是我自己的实现方法

获取所有章节距离上方或上层控件的位置

// 为了等页面 dom 元素生成后再获取
setTimeout(() => {
  this.$nextTick(() => {
    // 获取页面指定元素下的所有锚点标题元素
    const as = document.getElementById('scroll').getElementsByClassName('myTitle')
    // 将所有锚点标题元素的 id 和 offsetTop 值存储起来
    // 这里用的是数组的形式，保证位置不会发生错乱
    Object.keys(as).forEach(item => {
      let _item = as[item].firstChild
      const { id, offsetTop } = _item
      if (id) {
        this.aScrollTop.push({
          name: id,
          top: offsetTop
        })
      }
    })
  })
})

监听页面滚动

• 在页面加载后讲滑动的区域绑定滑动事件，记得在离开页面的时候卸载事件
• 可以按照实际情况添加防抖与节流

window.addEventListener('scroll', () => {
  if (this.scrollMark) {
    // 做一个标示作为限制，防止点击锚点标题滚动的时候有卡顿
    return
  }
  const scrollTop = document.getElementById('scroll').scrollTop + 300
  this.aScrollTop.forEach(item => {
    if (scrollTop > item.top) {
      // this.current 章节菜单绑定的值吗，用来修改高亮位置
      this.current = [item.name]
    }
  })
})

注意事项

• 如果页面的高度会随着内容变化而变化的话，在页面高度变化后需要重新获取所有章节距离上方或上层控件的位置，否则会不准确