Element Plus组件库中el-anchor使用过程遇到的问题

Element Plus组件库中el-anchor使用过程遇到的问题

情景再现

首先el-anchor需要通过container属性指定滚动的容器，但当需要指向el-scrollbar时，发现无法直接定位到该容器

<template>
    <el-scrollbar class="scollbar">
        <div class="left" ref="asd">
          <div class="box" v-for="i in 5" :id="`a${i}`">{{i}}</div>
        </div>
        <div class="right">
          <el-anchor container=".scollbar"
                     @change="handleChange"
                     @click="handleClickAnchor" style="width: 20rem">
            <el-anchor-link href="#a1">1</el-anchor-link>
            <el-anchor-link href="#a2">2</el-anchor-link>
            <el-anchor-link href="#a3">3</el-anchor-link>
            <el-anchor-link href="#a4">4</el-anchor-link>
          </el-anchor>
        </div>
    </el-scrollbar>
</template>

探究

检查页面元素

我们发现scorllbar套了三层div，再分别检查其样式，只有中间那层el-scroll__wrap设置了overflow:auto

也就意味着直接给el-scollbar添加类名以此来定位是行不通的， 查看官方文档可以发现el-scorllbar提供了wrap-class属性，用于控制二层类名，通过这个选项，我们便可以定位scollbar容器，实现锚点传送功能

完整代码：

<template>
    <el-scrollbar wrap-class="scrollbar" view-style="display: flex;">
        <div class="left" >
          <div class="box" v-for="i in 5" :id="`a${i}`">{{i}}</div>
        </div>
        <div class="right">
          <el-anchor container=".scrollbar"
                     @change="handleChange"
                     @click="handleClickAnchor" style="width: 20rem">
            <el-anchor-link href="#a1">1</el-anchor-link>
            <el-anchor-link href="#a2">2</el-anchor-link>
            <el-anchor-link href="#a3">3</el-anchor-link>
            <el-anchor-link href="#a4">4</el-anchor-link>
          </el-anchor>
        </div>

    </el-scrollbar>
</template>

<script setup>
function handleClickAnchor(e, link) {
  // 阻止点击的默认事件修改路由
  e.preventDefault();
  if (link.href) {
    const element = document.querySelector(link.href);
    element && element.scrollIntoView({ block: 'start', behavior: 'smooth', alignToTop: 'false' });
  }
}
const handleChange = (href) => {
  console.log(`anchor change: ${href}`)
}
</script>

<style scoped>

.left{
  width: 50%;
  height: 100vh;
}
.right{
  margin-top:20rem;
  height: 40%;
}
.box{
  height: 20rem;
}
</style>