scrollIntoView 使用方法

原创已于 2022-11-27 01:37:49 修改 · 710 阅读

0 ·

CC 4.0 BY-SA版权

_格鲁特宝宝原创，转载请务必注明出处

文章标签：

#behavior #block #inline #scrollIntoView #使元素滚动到可视区

于 2022-11-27 01:37:36 首次发布

Web FrontEnd 同时被 2 个专栏收录

226 篇文章

订阅专栏

javascript

73 篇文章

订阅专栏

scrollIntoView方法用于将指定元素滚动到浏览器视口可见区域。该方法支持behavior、block和inline三个参数，分别定义滚动方式、块级元素和行内元素的对齐方式。behavior可设置为auto、instant或smooth，block和inline可设置为start、center、end或nearest，控制元素滚动位置。这个方法在网页交互和滚动动画中非常实用。

scrollIntoView 使用方法

作用：

使元素滚动到可视区

它接受两种形式的值：布尔值或对象。接受布尔值主要还是为了兼容不支持平滑滚动（老版）的浏览器。我们这里只说对象值。

使用方法：

{

  behavior:"auto"|"instant"|"smooth",  // 默认 auto

  block:"start"|"center"|"end"|"nearest",  // 默认 center

  inline:"start"|"center"|"end"|"nearest",  // 默认 nearest

}

对象有三个参数。

behavior

表示滚动方式。auto表示使用当前元素的scroll-behavior样式。instant和smooth表示直接滚到底和使用平滑滚动。

block

表示块级元素排列方向要滚动到的位置。对于默认的writing-mode: horizontal-tb来说，就是竖直方向。start表示将视口的顶部和元素顶部对齐；center表示将视口的中间和元素的中间对齐；end表示将视口的底部和元素底部对齐；nearest表示就近对齐。

inline

表示行内元素排列方向要滚动到的位置。对于默认的writing-mode: horizontal-tb来说，就是水平方向。其值与block类似。

scrollIntoView使用方法 - 简书