scrollIntoView方法
2022-08-18 本文已影响0人
如果俞天阳会飞
描述
Element 方法 scrollIntoView：滚动父级容器，使得元素出现在视口。
参数
type alignToTop = boolean
type scrollIntoViewOptions = {
behavior: 'auto' | 'smooth'
block: 'start' | 'center' | 'end' | 'nearest'
inline: 'start' | 'center' | 'end' | 'nearest'
}
interface Element {
scrollIntoView(arg?: alignToTop | scrollIntoViewOptions): void
}
scrollIntoViewOptions，一个包含下列属性的对象。
-
behavior定义过渡动画，默认值为auto。
- auto，表示没有平滑的滚动动画效果。
- smooth，表示有平滑的滚动动画效果。
- block定义垂直方向的对齐，默认值为start。
- start，表示顶端对齐。
- center，表示中间对齐。
- end，表示底端对齐。
- nearest：如果元素完全在视口内，则垂直方向不发生滚动。
如果元素未能完全在视口内，则根据最短滚动距离原则，垂直方向滚动父级容器，使元素完全在视口内。
- inline定义水平方向的对齐，默认值为nearest
- start，表示左端对齐。
- center，表示中间对齐。
- end，表示右端对齐。
- nearest：如果元素完全在视口内，则水平方向不发生滚动。
如果元素未能完全在视口内，则根据最短滚动距离原则，水平方向滚动父级容器，使元素完全在视口内。
alignToTop
- 当传入参数true时，相当于{behavior: 'auto', block: 'start', inline: 'nearest'}
- 当传入参数false时，相当于{behavior: 'auto', block: 'end', inline: 'nearest'}
- 当未传入参数时，默认值为：{behavior: 'auto', block: 'start', inline: 'nearest'}
实例
document.querySelector('div').scrollIntoView({
behavior: 'smooth',
block: 'center',
inline: 'nearest'
})
