由于遇到了需要将指定元素滚动到页面中的需求。然后发现了H5有两个可以实现相应效果,但都有兼容性问题。图片如下。
-
scrollIntoView的兼容性
-
scrollIntoViewIfNeeded的兼容性
根据需要决定使用哪个。
scrollIntoView
参数可以为boolean或者options
- Boolean:
- true:元素的顶端将和其所在滚动区的可视区域的顶端对齐
- false:元素的底端将和其所在滚动区的可视区域的底端对齐
- options:{behavior,block,inline}
- behavior:动画过渡效果,"auto"或者"smoth",默认为"auto"
- block:垂直方向的对齐,"start", "center", "end", 或 "nearest"之一
- inline:水平方向的对齐,"start", "center", "end", 或 "nearest"之一
注意:
取决于其它元素的布局情况,此元素可能不会完全滚动到顶端或底端。
规范
scrollIntoViewIfNeeded
该方法pc端兼容性很差,基本排除使用的可能性。但移动端还是可以使用的。
参数:Boolean,默认为true。
- true :则元素将在其所在滚动区的可视区域中居中对齐
- false: 则元素将与其所在滚动区的可视区域最近的边缘对齐。 根据可见区域最靠近元素的哪个边缘,元素的顶部将与可见区域的顶部边缘对准,或者元素的底部边缘将与可见区域的底部边缘对准。