html元素定位scrollIntoView

使用scrollIntoView将元素定位到屏幕可视范围内

默认

element.scrollIntoView()  //  滚动到可视范围顶端

boolean值

element.scrollIntoView(true)  //  滚动到可视范围顶端
element.scrollIntoView(false)  //  滚动到可视范围底部

对象
behavior 可选
定义缓动动画， "auto", "instant", 或 "smooth" 之一。默认为 "auto"。
block 可选
"start", "center", "end", 或 "nearest"之一。默认为 "start"。
inline 可选
"start", "center", "end", 或 "nearest"之一。默认为 "nearest"。

// 动画运动到可视范围中间
element.scrollIntoView({behavior: "smooth", block: "center", inline: "center"});

问题：
1、受到页面布局影响，不一定能定位到理想位置；
2、可能会影响页面布局（webkit内核浏览器可以使用scrollIntoViewIfNeeded）

// 默认为true，则元素将在其所在滚动区的可视区域中居中对齐
element.scrollIntoViewIfNeeded()
element.scrollIntoViewIfNeeded(true)
// 如果为false，则元素将与其所在滚动区的可视区域最近的边缘对齐。 
// 根据可见区域最靠近元素的哪个边缘，元素的顶部将与可见区域的顶部边缘对准，
// 或者元素的底部边缘将与可见区域的底部边缘对准。
element.scrollIntoViewIfNeeded(false)