scrollIntoView API 的使用

scrollIntoView API 的使用

scrollIntoView()方法将调用它的元素滚动到浏览器窗口的可见区域。

前言/应用场景

项目中的一个新需求，对于文章自然段段首的追踪效果。

界面大概是左右分屏的形式，用户可以通过鼠标悬停在右侧的某一自然段的简介、标题的地方使得左侧的文章，自动滚动到响应的自然段。

api功能简介

Element 接口的 scrollIntoView() 方法会滚动元素的父容器，使被调用 scrollIntoView() 的元素对用户可见。
scrollIntoView()
scrollIntoView(alignToTop)
scrollIntoView(scrollIntoViewOptions)

alignToTop可选
一个布尔值：
如果为 true，元素的顶端将和其所在滚动区的可视区域的顶端对齐。相应的 scrollIntoViewOptions: > {block: “start”, inline: “nearest”}。这是这个参数的默认值。
如果为 false，元素的底端将和其所在滚动区的可视区域的底端对齐。相应的 scrollIntoViewOptions: > {block: “end”, inline: “nearest”}。

scrollIntoViewOptions 可选
一个包含下列属性的对象：
behavior 可选
定义动画过渡效果，auto 或 smooth 之一。默认为 auto。
block 可选
定义垂直方向的对齐，start、center、end 或 nearest 之一。默认为 start。
inline 可选
定义水平方向的对齐，start、center、end 或 nearest 之一。默认为 nearest

例 vue ts的写法

(this.$refs.ref_pdf_view as Element).scrollIntoView({
        behavior: 'smooth', // 平滑过渡
         block: 'start', // 上边框与视窗顶部平齐。默认值
});