在网页开发中，使用 scrollIntoView() 方法可以将页面中的指定元素滚动到可视区域。但是在早期的浏览器中，这个方法只提供了一个简单的 bool 类型参数，用来控制是否使用平滑滚动效果。在 ES12 中，scrollIntoViewOptions 对象成为了可选的第二个参数，可以控制滚动行为的各个方面。
下面是对 scrollIntoViewOptions 的详细解释:
scrollMode
scrollMode 是一个可选的字符串参数，用于控制滚动方式。可选值为 "if-needed" 和 "always"，分别表示仅在元素未在视口中时滚动和总是滚动。默认值是 "if-needed"。
// 如果元素未在视口中则滚动
element.scrollIntoView({ scrollMode: 'if-needed' });
// 无论如何都会滚动
element.scrollIntoView({ scrollMode: 'always' });block
block 是一个可选的字符串参数，用于指定垂直方向上的对齐方式。可选值为 "start"、"end"、"center" 和 "nearest"，分别表示对齐到上边缘、下边缘、中心和最近的边缘。默认值是 "start"。
// 对齐到视口顶部
element.scrollIntoView({ block: 'start' });
// 滚动到元素中间
element.scrollIntoView({ block: 'center' });
// 对齐到视口底部
element.scrollIntoView({ block: 'end' });inline
inline 是一个可选的字符串参数，用于指定水平方向上的对齐方式。可选值同 block，默认值是 "nearest"。
// 对齐到左边
element.scrollIntoView({ inline: 'start' });
// 滚动到元素中心
element.scrollIntoView({ inline: 'center' });
// 对齐到右边
element.scrollIntoView({ inline: 'end' });behavior
behavior 是一个可选的字符串参数，用于控制滚动的速度。可选值为 "auto"、"smooth" 和用户自定义的 CSS transition。默认值是 "auto"，表示使用浏览器默认的滚动行为。
// 带有平滑滚动效果
element.scrollIntoView({ behavior: 'smooth' });
// 使用自定义的过渡效果
element.scrollIntoView({ behavior: 'transition' });示例代码
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
---------------------------- ----------
-------
---------- -
------- ------
--------- -----
------- --- ----- -----
-
------ -
------- ------
------ -----
----------------- -------
------- --- ----- -----
-
--------
-------
------
---- ------------------
---- ------------- ----------------- -------
---- ------------- ----------------- -------
---- ------------- ----------------- -------
---- ------------- ----------------- -------
---- ------------- ----------------- -------
------
--------
----- ------ - ------------------------------------
-------- -------------------- -
----- ----- - --------------
----------------------
------ ---------
--------- --------
---
-
--- ------------ - --
-------------- -- -
----------------------------
---------------
-- ------------- -- -------------- -
------------ - --
-
-- ------
---------
-------
-------上述示例代码中，我们使用了 scrollIntoViewOptions 对象，将页面中的 block 元素居中并使用平滑滚动效果滚动。定时器每隔 3 秒滚动到下一个元素，形成一个自动滚动效果。
结论
scrollIntoViewOptions 对象提供了精细的控制滚动行为的方法，可以帮助我们在各种场景下实现准确的滚动效果。对于需要控制滚动的开发人员来说，这个新特性绝对是一个值得关注的重要内容。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/672f9fdbeedcc8a97c8f970c