scrollIntoView()方法的使用

这是我参与8月更文挑战的第1天，活动详情查看：8月更文挑战

需求说明

进入文章详情页面自动定位到文章底部的评论区域，要实现该需求，从开发的角度考虑方法并不只有一种。

方法一：锚点跳转

HTML：

<div class="">
    // 文章内容
</div>
<div class="" id="comment">
    // 评论区域
</div>

JS：

window.location.href = "#comment";

使用锚点定位有以下缺点：
1、浏览器的URL会发生变化，如果刷新可能会出现问题。
2、位置瞬间改变，没有缓冲效果。

方法二：scrollIntoView()

HTML:

<div class="">
    // 文章内容
</div>
<div class="" ref="comment">
    // 评论区域
</div>

JS：

this.$refs.comment.scrollIntoView({
    behavior: "smooth",  // 平滑过渡
    block:    "start"    // 上边框与视窗顶部平齐
});

使用scrollIntoView()的优点：
1、不会改变浏览器URL
2、可以设置缓冲效果
3、可以设置更多自定义效果

scrollIntoView()语法
1element.scrollIntoView（）; // 等同于element.scrollIntoView(true)
element.scrollIntoView（alignToTop）; //布尔参数
element.scrollIntoView（scrollIntoViewOptions）; //对象参数

参数 alignToTop
提示：该参数为可选，目前之前这个参数得到了良好的支持
true 元素的顶部将对齐到可滚动祖先的可见区域的顶部。对应于scrollIntoViewOptions: {block: "start", inline: "nearest"}。这是默认值。
false 元素的底部将与可滚动祖先的可见区域的底部对齐。对应于scrollIntoViewOptions: {block: "end", inline: "nearest"}。

参数 scrollIntoViewOptions
提示：该参数为可选，目前这个参数浏览器对它的支持并不好，可以查看下文兼容性详情
behavior：（可选）定义过渡动画。"auto","instant"或"smooth"。默认为"auto"。
block：（可选）"start"，"center"，"end"或"nearest"。默认为"center"。
inline：（可选）"start"，"center"，"end"或"nearest"。默认为"nearest"。

更多的应用场景
除了本次跳转到指定位置，还可以应用在以下场景：
1、回到顶部
2、聊天窗口滚动显示最新的消息
3、往一个列表添加新项后滚动显示最新的添加的新项

写在最后
1、不支持 "smooth" 属性 和 "center" 设置项。
2、关于兼容性，目前只有火狐浏览器和chrome浏览器完美支持。