让视野外html元素显示在视野中

对于滚动条外的元素有时我们需要让其自动进入视野范围内，比如聊天界面，每发过来一条消息，让最新消息显示在视野内，或者点击按钮，要看到对应的内容。

对于一般文档内容，可能直接在元素上设置个id，然后利用链接跳转功能就可实现，如：

<a href="#about">about</a>

但对于一个元素的内容，如何其在滚动条外如何做呢？

有两种简单的方法：

1、原生的scrollIntoView方法

scrollIntoView可以让元素滚动到视野范围内，主流浏览器都支持，所以对于需要进入视野的元素，只需调用该方法即可：

document.getElementById('about').scrollIntoView()

该方法还可接受一个参数，默认元素会滚动与视窗上方对齐，如果传入false，则元素会滚动到视窗中间（如果可以的话）。

document.getElementById('about').scrollIntoView(false)

2、利用tabindex

html5新增属性tabindex，本意是用来控制tab键聚焦元素显示的顺序，通过给元素一个tabindex属性也可以让元素变为可聚焦元素：

<div id="about" tabindex>about</div>

之后调用focus即可触发

document.getElementById('about').focus()

元素会自动显示视窗中间
这样显示的元素外面会有一个轮廓，如何不想看到，再次调用blur即可

document.getElementById('about').blur()