实现锚点加滚动高亮功能

最新推荐文章于 2024-08-21 14:14:14 发布

刘哈哈哈哈

最新推荐文章于 2024-08-21 14:14:14 发布

阅读量667

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/lxy123456qqq/article/details/128821387

版权

实现点击滚动高亮且滚动滚动条对应区域高亮

//html
<div class="bunching-list leftFix">
                <div v-for="(item, index) in list" :key="item.id" @click="activeIcon(index, item.id)"
                  :class="{ 'item-icon': index == activeIndex }" class="link-icon">
                  {{ item.name }}
                </div>
              </div>

     .leftFix {
          position: sticky;//固定位置
          top: 20px;

        }          
//功能
//点击滚动高亮
const activeIcon = (index: any, id: any) => {
  activeIndex.value = index
    let anchorElement = document.getElementById('less' + id);//获取每个item
    if (anchorElement) { anchorElement.scrollIntoView(false); }
}
//滚动滚动条对应区域高亮
const getScrollTop = () => {
  let scrollItems = document.querySelectorAll('.icon-list')
  for (let i = scrollItems.length - 1; i >= 0; i--) {
    // 判断滚动条滚动距离是否大于当前滚动项可滚动距离
    let judge = document.getElementById('fatherScroll')?.scrollTop >= scrollItems[i].offsetTop - scrollItems[0].offsetTop - 64;
    if (judge) {
      activeIndex.value = i
      break
    }

  }
  if (document.getElementById('fatherScroll')?.scrollTop === 0) {
    activeIndex.value = 0
  }
}
onMounted(() => {
  document.getElementById('fatherScroll').addEventListener('scroll', getScrollTop)
})
onUnmounted(() => {
  document.getElementById('fatherScroll')?.removeEventListener('scroll', getScrollTop)
})