🚅 学习 - 使元素出现在视口
✨ scrollIntoView：滚动父级容器，使得元素出现在视口
DOM 元素的实例方法
下面参考：https://blog.csdn.net/learn8more/article/details/108047794
用法一：alignToTop
// 等同于element.scrollIntoView(true)
element.scrollIntoView();
// 布尔参数
element.scrollIntoView(alignToTop);
| alignToTop | 目前之前这个参数得到了良好的支持 |
|---|---|
| true | 滚动到与元素顶端对齐，相当于 { behavior: ‘auto’, block: ‘start’, inline: ‘nearest’ } |
| false | 滚动到与元素底部对齐，相当于 { behavior: ‘auto’, block: ‘end’, inline: ‘nearest’ } |
用法二：scrollIntoViewOptions
nearest 是自动选择最近的意思，会按照距离最短 “start” 或 “end” 去选择滚动
PS：如果元素已在视口中，某方向的 nearest 参数无效，不会滚动
// 对象参数
element.scrollIntoView(scrollIntoViewOptions);
| scrollIntoViewOptions | 目前这个参数浏览器对它的支持并不好，但其实也可以了…老旧的不支持 |
|---|---|
| behavior | 定义过渡动画，默认 “auto” 无动画，可选 “smooth” 有动画 |
| block | 定义垂直对齐，”start”、”center”、”end” 或 “nearest”。默认为”start” |
| inline | 定义水平对齐，”start”、”center”、”end” 或 “nearest”。默认为”nearest” |