scrollntoViewApi详解

一个常见的场景,那就是当我们进入到一个页面的时候需要让他的滚动高度到一个目标元素,最简单的一个方法使用hash在地址栏加上#元素id,就可以实现一个这样的效果,但是现在项目很少有什么原生,jq之类的，使用vue,react,hash可能会去被解析为一个路由,scrollntoView就不会有这个烦恼。

1. 介绍:scrollIntoView() 方法会滚动元素的父容器，使被调用 scrollIntoView() 的元素对用户可见。

2. 使用方法

1. 元素.scrollIntoView(),滚定到元素的位置

2. 第一个可选参数为alignToTop是一个布尔值,为true的话页面会滚动到可以看到这个元素的顶部,false则滚动到底部能显示这个元素的位置,默认值为true。

3. 第二个可选参数scrollIntoViewOptions为对象,三个属性

• 第一个为behavior定义动画效果smooth为平滑的滚动,滚动条会带上动画动画效果,默认值auto没有动画效果

• 第二个参数block定义滚动的位置,四个属性值center,start,end,nearest,其中start和end和上面

alignToTop的true和false效果一样,nearest和end又一样,center就是滚动到这个元素在可视区 域的中间。

• 第三个参数inline定义水平滚动的位置,前面的属性都是竖向滚动条,四个属性值center,start,end,nearest,center就是元素在可视区域x轴位置中间,start就是在x轴左边,end和nearest在x轴右边。

小结:

scrollIntoView不止可以滚动整个页面的滚动条也可以滚动一个元素的滚动条,解决了vue，react使用hash定位元素的问题,传入的两个参数只需有一个,不然不生效!