前端scrollIntoView和scrollTo锚点实际项目运用

最新推荐文章于 2025-03-12 15:36:37 发布

橙子yq

最新推荐文章于 2025-03-12 15:36:37 发布

阅读量483

点赞数 2

文章标签：前端 javascript css

本文链接：https://blog.csdn.net/m0_49031950/article/details/139322648

版权

方法一： scrollIntoView

html部分

<!-- 按钮区，点击滚动 tagList = ["科目1", "科目2", "科目3"] -->
 <span
        @click="tagHandle(index, '#a' + index)"
        :class="tagIndex === index ? 'tab_select_color' : ''"
        v-for="(item, index) in tagList"
        :key="index"
        >{{ item }}</span>

<!-- 监听滚动，给按钮对应切换 -->

<div
     @wheel="handleScroll"
     class="soroll"
     ref="box">
     <div id="a0" class="at_item></div>
     <div id="a1" class="at_item></div>
     <div id="a2" class="at_item></div>
     <div id="a3" class="at_item></div>
</div>

JS部分

// 点击锚点后的平滑到对应下标元素
// selector: #a1(id选择器)
const tagIndex = ref<number>(0)

const tagHandle = (idx: number, selector: any) => {
  tagIndex.value = idx

  document.querySelector(selector).scrollIntoView({
    behavior: "smooth" // 平滑
  })
}

// 监听滚动，同步按钮的切换

const box = ref<any>(null)

const handleScroll = (i: any) => {
  const navs = document.querySelectorAll(".at_item")
  const offsetTopArr = []
  navs.forEach((item) => {
    offsetTopArr.push(item.offsetTop)
  })
  const scrollTop = box.value.scrollTop
  offsetTopArr.forEach((item, index) => {
    if (scrollTop >= item) {
      tagIndex.value = index
    }
  })
}

方法二: scrollTo

html部分

<!-- 监听用户滚动，联动按钮切换 -->
<div class="scroll_class" ref="anchorRef" @scroll="handleScroll">

<!-- 点击按钮，滚动到对应高度 -->
<span @click="tagHandle(index,'#a'+ index)" :class="tagIndex ===index ? 'right_select_color' :''" v-for="(item,index) in tagList" :key="index"> {{item}} </span>
     <div id="a0" class="at_item></div>
     <div id="a1" class="at_item></div>
     <div id="a2" class="at_item></div>
     <div id="a3" class="at_item></div>
</div>

JS部分

  const anchorRef = ref<any>(null)

    const handleScroll = (i: any) => {
        const navs = document.querySelectorAll('.at-item')
        const offsetTopArr = <any>[]
        navs.forEach((item) => {
            offsetTopArr.push(item.offsetTop)
        })
        const scrollTop = anchorRef.value.scrollTop
        offsetTopArr.forEach((item, index) => {
            if (scrollTop >= item) {
                tagIndex.value = index
            }
        })
    }

  const tagIndex = ref<number>(0)

  const tagHandle = (idx: number, selector: any) => {
       console.log(idx ,selector)
       let curDiv = document.querySelector(selector);
       setTimeout(() => {
          tagIndex.value = idx
       }, 1000);
       const element:any = document.querySelector('.scroll_class');
       element.scrollTo({
          top: curDiv.offsetTop + 180,
          behavior: 'smooth' // 可选，平滑滚动效果
       });
    }

scrollTo相对来说更灵活，可以自定需要上下移动多少。