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