javascript - scrollIntoView()方法实现

Question

使用javascript，我们可以使用-

document.getElementById('pluginsource_wrapper').scrollIntoView();

我可以理解 scrollIntoView()方法的概念，但只想了解其代码并了解其实现方式。

您能否指出我可以在其中找到 scrollIntoView()实现的代码？

Answer 1

scrollIntoView（）

scrollIntoView()方法滚动元素的父容器，以使用户可以看到在其上调用scrollIntoView()的元素。



scrollIntoView（）的实现

CSSOM View Module规范包含scrollIntoView()执行的步骤序列，如下所示：


让行为为“自动”。
让块为“开始”。
让内联成为“最近”。
如果arg是ScrollIntoViewOptions词典，则：


将行为设置为选项的behavior词典成员。
将块设置为选项的block词典成员。
将内联设置为选项的inline词典成员。

否则，如果arg为false，则将block设置为“ end”。
如果该元素没有任何关联的layout box，则返回。
Scroll the element into view具有行为，阻止和内联。
（可选）执行其他一些操作，以引起用户的注意。




滚动到视图中的步骤

对于scroll an element into view element，具有滚动行为行为，块流动方向位置块和内联基本方向位置内联，意味着对建立滚动框滚动框的每个祖先元素或视口运行这些步骤，从最里面到最下面的顺序为：最外面的滚动框：


如果与元素关联的文档与与元素关联的文档或与框关联的视口的来源不同，请终止这些步骤。
将元素边界框设为元素上调用getBoundingClientRect（）的返回值表示的框。
假设滚动框边缘A为滚动框的块流动方向上的开始边缘，而元素边缘A为元素边界框的边界在与滚动框边缘A相同的物理侧上。
假设滚动框边缘B是滚动框的块流动方向上的结束边缘，而元素边缘B是元素边界框在与滚动框边缘B相同的物理边界上的边界。
假设滚动框边缘C为滚动框的内联基本方向上的开始边缘，而元素边缘C为元素边界框在与滚动框边缘C相同的物理边界上的边界。
假设滚动框边缘D为滚动框的内联基本方向上的结束边缘，而元素边缘D为元素边界框的边界与滚动框边缘D在同一物理侧。
令元素高度为元素边缘A与元素边缘B之间的距离。
令滚动框高度为滚动框边缘A与滚动框边缘B之间的距离。
令元素宽度为元素边缘C和元素边缘D之间的距离。
令滚动框宽度为滚动框边缘C和滚动框边缘D之间的距离。
通过执行以下步骤，将position设为滚动位置滚动框：


如果块是“开始”，则将元素边A与滚动框边A对齐。
否则，如果块为“ end”，则将元素边B与滚动框边B对齐。
否则，如果块为“中心”，则将元素边界边框的中心与滚动框的块流动方向上的滚动框的中心对齐。
否则，块为“最近”：

If element edge A and element edge B are both outside scrolling box edge A and scrolling box edge B
Do nothing.
If element edge A is outside scrolling box edge A and element height is less than scrolling box height
If element edge B is outside scrolling box edge B and element height is greater than scrolling box height
Align element edge A with scrolling box edge A.
If element edge A is outside scrolling box edge A and element height is greater than scrolling box height
If element edge B is outside scrolling box edge B and element height is less than scrolling box height
Align element edge B with scrolling box edge B.

如果内联为“开始”，则将元素边缘C与滚动框边缘C对齐。
否则，如果inline是“ end”，则将元素边缘D与滚动框边缘D对齐。
否则，如果内联为“中心”，则将元素边界边框的中心与滚动框的内联基本方向上的滚动框的中心对齐。
否则，内联为“最近”：

If element edge C and element edge D are both outside scrolling box edge C and scrolling box edge D
Do nothing.
If element edge C is outside scrolling box edge C and element width is less than scrolling box width
If element edge D is outside scrolling box edge D and element width is greater than scrolling box width
Align element edge C with scrolling box edge C.
If element edge C is outside scrolling box edge C and element width is greater than scrolling box width
If element edge D is outside scrolling box edge D and element width is less than scrolling box width
Align element edge D with scrolling box edge D.

如果位置与滚动框的当前滚动位置相同，并且滚动框没有正在进行的平滑滚动，则返回。
如果滚动框与元素相关联

Let associated element be the element.

如果滚动框与视口关联

Let document be the viewport’s associated Document. Let associated element be document’s root element, if there is one, or null otherwise.

执行滚动框滚动以定位，将关联元素作为关联元素，并将行为作为滚动行为。