将元素滚动到视图区

import { nextTick } from 'vue'

/**
 * 滚动到选中项
 * @param eleName 元素的className
 */
const onScrollIntoView = (eleName: string) => {
  if (typeof eleName !== 'string') return
  nextTick(() => {
    const targetElements = document.getElementsByClassName(eleName)
    if (targetElements.length > 0) {
      const targetElement = targetElements[0]
      targetElement.scrollIntoView({
        // eslint-disable-next-line no-undef
        behavior: 'instant' as ScrollBehavior,
        block: 'center',
      })
    }
  })
}

export default onScrollIntoView





{
  behavior: 'auto' | 'smooth' | 'instant', // 滚动行为
  block: 'start' | 'center' | 'end' | 'nearest', // 垂直对齐方式
  inline: 'start' | 'center' | 'end' | 'nearest' // 水平对齐方式
}

onScrollIntoView 方法是一个用于将指定类名的元素滚动到视图中的实用函数：

1. 参数：接收一个字符串参数 eleName，表示要滚动到的元素的类名

2. 类型检查：首先检查参数是否为字符串，如果不是则直接返回

3. nextTick：使用 Vue 的 nextTick 确保在 DOM 更新后执行滚动操作

4. 获取元素：通过 document.getElementsByClassName 获取所有匹配类名的元素

5. 滚动到元素：如果找到匹配元素，则对第一个元素调用 scrollIntoView 方法

scrollIntoView 方法

scrollIntoView 是 DOM 元素的原生方法，属于 Element 接口 的一部分。它用于将元素滚动到浏览器窗口的可视区域内。

targetElement 的其他常用方法

作为 DOM 元素，targetElement 有许多可用的方法，常见的有：

1. DOM 操作：

   • appendChild()

   • removeChild()

   • insertBefore()

   • replaceChild()

   • cloneNode()

2. 样式相关：

   • getBoundingClientRect() - 获取元素大小和位置

   • matches() - 检查元素是否匹配 CSS 选择器

   • classList 相关方法 (add, remove, toggle, contains)

3. 属性操作：

   • getAttribute()

   • setAttribute()

   • removeAttribute()

   • hasAttribute()

4. 事件相关：

   • addEventListener()

   • removeEventListener()

   • dispatchEvent()

5. 其他实用方法：

   • focus() - 使元素获得焦点

   • blur() - 使元素失去焦点

   • querySelector() / querySelectorAll() - 在元素内查找子元素

   • getElementsByClassName() / getElementsByTagName() - 获取子元素集合