对于滚动条外的元素有时我们需要让其自动进入视野范围内,比如聊天界面,每发过来一条消息,让最新消息显示在视野内,或者点击按钮,要看到对应的内容。
对于一般文档内容,可能直接在元素上设置个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()