简介

DOM规范中并没有规定各浏览器需要实现怎样的滚动页面区域，各浏览器实现了相应的方法，可以使用不同的方式控制页面区域的滚动。这些方法作为HTMLElement类型的扩展存在，所以它能在所有元素上使用。

scrollIntoView()

默认

1
element.scrollIntoView()  //  滚动到可视范围顶端

boolean值

1
2
element.scrollIntoView(true)  //  滚动到可视范围顶端
element.scrollIntoView(false)  //  滚动到可视范围底部

对象

  • behavior 可选
    定义缓动动画， “auto”, “instant”, 或 “smooth” 之一。默认为 “auto”。
  • block 可选
    “start”, “center”, “end”, 或 “nearest”之一。默认为 “start”。
  • inline 可选
    “start”, “center”, “end”, 或 “nearest”之一。默认为 “nearest”。
1
2
// 动画运动到可视范围中间
element.scrollIntoView({behavior: "smooth", block: "center", inline: "center"});

方法

  • scrollIntoView(alignWithTop)：滚动浏览器窗口或容器元素，以便在当前视窗的可见范围看见当前元素。如果alignWithTop为true，或者省略它，窗口会尽可能滚动到自身顶部与元素顶部平齐。——-目前各浏览器均支持
  • scrollIntoViewIfNeeded(alignCenter)：只在当前元素在视窗的可见范围内不可见的情况下，才滚动浏览器窗口或容器元素，最终让当前元素可见。如果当前元素在视窗中可见，这个方法不做任何处理。如果将可选参数alignCenter设置为true，则表示尽量将元素显示在视窗中部（垂直方向）——Safari、Chrome实现了这个方法
  • scrollByLines(lineCount)：将元素的内容滚动指定的行数的高度，lineCount的值可以为正值或是负值。—Safari、Chrome实现了这个方法
  • scrollByPages(pageCount)：将元素的内容滚动指定的页面的高度，具体高度由元素的高度决定。—Safari、Chrome实现了这个方法

scrollIntoView()和scrollIntoVIewIfNeeded()作用的是元素的窗口，而scrollByLines()、scrollByPages()影响元素自身

兼容性

由于这个属性还没有成为通用标准，所以使用前需要注意兼容性。