vue实现平滑滚动到目标标签页

平滑滚动

   <div class="tabs" ref="tabList">
      <div class="tab"   v-for="(item, index) in 10"
        :key="index" @click="clickTab(index)">
        <div class="inside" :class="tabIndex === index ? 'inside-active' : ''">
          <div class="name">{{ index}}</div>
        </div>
      </div>
    </div>

const tabList = ref(null);
const clickTab = ((index) => {
  tabIndex.value = index
  scrollToTab(index)
})

// 滚动到选中的 Tab
const scrollToTab = (index) => {
  if (tabList.value) {
    const tabItems = tabList.value.children;
    const targetTab = tabItems[index];
    if (targetTab) {
      // 计算目标 Tab 的滚动位置，目标 Tab 会居中
      const scrollLeft = targetTab.offsetLeft - (tabList.value.offsetWidth / 2) + (targetTab.offsetWidth / 2);
      tabList.value.scrollTo({
        left: scrollLeft,
        behavior: 'smooth', // 平滑滚动
      });
    }
  }
};

tabList.value：

这是容器元素，包含所有的标签（Tab）。通过 tabList.value 获取这个容器的引用。通过ref标记。可以拿到容器里面所有的子元素
在这里插入图片描述

获取 tabItems：

tabList.value.children 获取所有标签（Tab）元素的集合，tabItems 即是这些 Tab 元素。
在这里插入图片描述

获取目标 Tab：

根据传入的 index，从 tabItems 中取出对应的目标 Tab 元素。

计算目标 Tab 的滚动位置：
targetTab.offsetLeft 获取目标 Tab 相对于 tabList 的左偏移量。

比如点击的是第三个tab,这时它的左偏移在这里插入图片描述

tabList.value.offsetWidth / 2 获取容器的宽度的一半，即容器中心的位置。
targetTab.offsetWidth / 2 获取目标 Tab 的宽度的一半，用于将目标 Tab 居中。
最终的滚动位置是：目标 Tab 左边距减去容器一半宽度，再加上目标 Tab 一半宽度。

滚动操作：使用 scrollTo 方法平滑滚动到计算得出的 scrollLeft 位置。behavior: ‘smooth’ 让滚动动画更平滑。
scrollTo 是一个用于在网页中滚动元素的 JavaScript 方法。它可以让你精确地控制滚动的位置，包括滚动到指定的坐标或元素位置。可以应用于滚动容器、页面或其他具有滚动条的元素。

语法：

element.scrollTo(x, y);
element.scrollTo(options);

参数：

x：水平滚动的目标位置（以像素为单位）。
y：垂直滚动的目标位置（以像素为单位）。

或者，你也可以使用一个包含滚动配置选项的对象：

element.scrollTo({
  left: number,     // 水平滚动位置（以像素为单位）
  top: number,      // 垂直滚动位置（以像素为单位）
  behavior: string  // 滚动行为，可选值：'auto' 或 'smooth'（默认值是 'auto'）
});

示例 1：简单的滚动到指定位置

// 滚动到页面的某个位置
window.scrollTo(0, 500); // 滚动到页面从顶部 500px 处

// 或者可以在容器元素上调用 scrollTo，滚动到某个位置
document.getElementById("container").scrollTo(0, 200); // 滚动容器到 200px 处

示例 2：平滑滚动到指定位置
scrollTo 允许你设置滚动行为为平滑滚动，达到更好的用户体验。

document.getElementById("container").scrollTo({
  left: 0,         // 水平滚动位置
  top: 300,        // 垂直滚动位置
  behavior: 'smooth' // 平滑滚动
});

示例 3：使用 scrollTo 滚动到页面顶部或底部
你可以通过传递 0 和 document.documentElement.scrollHeight 来滚动到页面的顶部或底部：

// 滚动到页面顶部
window.scrollTo({
  top: 0,
  behavior: 'smooth'
});

// 滚动到页面底部
window.scrollTo({
  top: document.documentElement.scrollHeight,
  behavior: 'smooth'
});

示例 4：滚动到一个指定的 DOM 元素

你可以计算出一个元素的 offsetTop 或 offsetLeft 来滚动到该元素的位置：

// 获取目标元素
const element = document.getElementById('target');

// 滚动到该元素的位置
window.scrollTo({
  top: element.offsetTop,     // 该元素相对于文档顶部的距离
  left: 0,                    // 水平滚动
  behavior: 'smooth'          // 平滑滚动
});

示例 5：结合 Vue 和 scrollTo 用于平滑滚动
在 Vue 中，你可以使用 ref 获取 DOM 元素并应用 scrollTo 实现平滑滚动效果。例如，滚动到 Tab 页面：

<template>
  <div>
    <div ref="tabList" style="overflow-x: scroll; white-space: nowrap;">
      <div class="tab" style="display: inline-block; width: 100px;">Tab 1</div>
      <div class="tab" style="display: inline-block; width: 100px;">Tab 2</div>
      <div class="tab" style="display: inline-block; width: 100px;">Tab 3</div>
    </div>
    <button @click="scrollToTab(1)">Scroll to Tab 2</button>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const tabList = ref(null);

// 滚动到指定的 Tab
function scrollToTab(index) {
  const tab = tabList.value.getElementsByClassName('tab')[index];
  if (tab) {
    tabList.value.scrollTo({
      left: tab.offsetLeft,
      behavior: 'smooth'
    });
  }
}
</script>