目录

隐藏滚动条

锚点

---

    <div class="right-wrap">
      <mds-tabs position="right" v-model="active" @change="scroll(active, $event)">
        <mds-tabs-pane v-for="i in moduleNames" :key="i.val" :tab="i.name" :index="i.val"
          :disabled="i.val !== 'nav0' && !formData.moduleDataType.includes(parseInt(i.val[3]))"></mds-tabs-pane>
      </mds-tabs>
    </div>

隐藏滚动条

.workbench-create {
  height: 100%;
  display: flex;

  .left-wrap {
    height: 100%;
    overflow: auto;
    flex: 1;
    padding-left: 40px;
    //隐藏元素的滚动条。这通常用于自定义滚动条样式。
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;

    /* IE 10+ */
    &::-webkit-scrollbar {
    //伪元素选择器，用于选择Webkit浏览器（如Chrome、Safari等）中的滚动条。
      display: none;
      /* Chrome Safari */
    }

  .right-wrap {
    height: 100%;
    width: 200px;
    padding-top: 40px;
    padding-right: 40px;
    margin-left: auto;
  }
}

锚点

  // 锚点
  scroll(domId: string, e: any) {
    const dom = document.querySelector(`#${domId}`)
    if (dom) {
      dom.scrollIntoView({ behavior: 'smooth' })
    }
  }
}

auto: 默认值。滚动行为没有特殊效果，类似于传统的滚动方式，会立即滚动到目标位置。
soomth：在大多数浏览器适用
instant: 滚动到目标位置，但没有平滑效果，瞬间到达。