JavaScript 浏览器元素滚动 scrollIntoView()

scrollIntoView()

​ DOM 规范中没有涉及的一个问题是如何滚动页面中的某个区域。为填充这方面的缺失，不同浏览器实现了不同的控制滚动的方式。在所有这些专有方法中，HTML5 选择了标准化 scrollIntoView()。

​ scrollIntoView() 方法存在于所有 HTML 元素上，可以滚动浏览器窗口或容器元素以便包含元素进入视口。这个方法的参数如下：

• alignToTop 是一个布尔值。
  • true：窗口滚动后元素的顶部与视口顶部对齐。
  • false：窗口滚动后元素的底部与视口底部对齐。
• scrollIntoViewOptions 是一个选项对象。
  • behavior：定义过渡动画，可取的值为"smooth"和"auto"，默认为"auto"。
  • block：定义垂直方向的对齐，可取的值为"start"、“center”、“end” 和 “nearest”，默认为 “start”。
  • inline：定义水平方向的对齐，可取的值为"start"、“center”、“end” 和 “nearest”，默认为 “nearest”。
• 不传参数等同于 alignToTop 为 true。

来看几个例子：

// 确保元素可见
document.forms[0].scrollIntoView(); 

// 同上
document.forms[0].scrollIntoView(true); 
document.forms[0].scrollIntoView({block: 'start'}); 

// 尝试将元素平滑地滚入视口
document.forms[0].scrollIntoView({behavior: 'smooth', block: 'start'}); 
1
2
3
4
5
6
7
8
9

​ 这个方法可以用来在页面上发生某个事件时引起用户关注。把焦点设置到一个元素上也会导致浏览器将元素滚动到可见位置。