Vue中scrollIntoView()方法详解与实际运用举例

element.scrollIntoView（）; // 等同于element.scrollIntoView(true)
element.scrollIntoView（alignToTop）; //布尔参数
element.scrollIntoView（scrollIntoViewOptions）; //对象参数

var element = document.getElementById("box");
 
element.scrollIntoView();
element.scrollIntoView(false);
element.scrollIntoView({block: "end"});
element.scrollIntoView({behavior: "instant", block: "end", inline: "nearest"});

<template>
  <div>
    <div v-for="(item, index) in list" :key="index" :ref="'listItem-' + index">{{ item }}</div>
  </div>
</template>

<script>
import { computed, ref } from 'vue';

export default {
  setup() {
    const list = ref(['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5']);
    const activeIndex = ref(null);

    // 计算要滚动到的元素
    const activeElement = computed(() => {
      if (activeIndex.value !== null) {
        return document.querySelector(`[ref="listItem-${activeIndex.value}"]`);
      }
      return null;
    });

    // 滚动到指定的列表项
    const scrollToIndex = (index) => {
      activeIndex.value = index;
      if (activeElement.value) {
        activeElement.value.scrollIntoView();
      }
    };

    return {
      list,
      scrollToIndex
    };
  }
};
</script>

<button @click="scrollToIndex(3)">Scroll to Index 3</button>

watch(clickId, async() => {
  // console.log('clickId changed from', oldValue, 'to', newValue)
  // eslint-disable-next-line
  const data = await window.app.windowGetData(store.userBaseInfo.username + '.data.warn')
  let code = 0
  const index = data.findIndex((item:any) => (
    item.configId === clickId.value
  ))
  data.forEach((item:any) => {
    if (item.configId === clickId.value) {
      code = Number(item.code)
    }
  })
  if (index !== -1) {
    itemClick(index, code)
    scrollToIndex() // 点击托盘消息的时候触发这里
  }
})

// 计算要滚动到的元素
const activeElement = computed(() => {
  if (activeIndex.value) {
    return document.getElementById(`listItem-${ activeIndex.value }`)
  }
  return null
})
// 滚动到指定的列表项
const scrollToIndex = () => {
  if (activeElement.value) {
    activeElement.value.scrollIntoView(false)
  }
}