scrollIntoView()方法实现 [英] scrollIntoView() method implementation

问题描述

使用javascript，我们可以使用-

Using javascript we can bring an element into view using -

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

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

I can understand the concept of scrollIntoView() method but just wanted to know its code and understand how it is implemented.

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

Could you please point me to the code where I can find implementation of scrollIntoView()?

推荐答案

scrollIntoView()

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

CSSOM视图模块规范包含步骤顺序 >由 scrollIntoView() 执行，如下所示:

The CSSOM View Module specification contains the sequence of steps performed by scrollIntoView() and are as follows:

1. 让行为成为自动".
2. 让阻止成为开始".
3. 让内联成为最近".
4. 如果arg是 ScrollIntoViewOptions 字典，则:
   • 将行为设置为选项的行为字典成员.
   • 将块设置为选项的 block 字典成员.
   • 将内联设置为选项的内联词典成员.

1. Let behavior be "auto".
2. Let block be "start".
3. Let inline be "nearest".
4. If arg is a ScrollIntoViewOptions dictionary, then:
   • Set behavior to the behavior dictionary member of options.
   • Set block to the block dictionary member of options.
   • Set inline to the inline dictionary member of options.

---

将元素滚动到视图中的步骤

将元素滚动到视图元素具有滚动行为行为，块流动方向位置块和内联基本方向位置内联，意味着对建立一个滚动框滚动框的每个祖先元素或视口按照从最里面到最外面的滚动框的顺序运行这些步骤:

---

Steps for Scroll the element into view

To scroll an element into view element, with a scroll behavior behavior, a block flow direction position block, and an inline base direction position inline, means to run these steps for each ancestor element or viewport that establishes a scrolling box scrolling box, in order of innermost to outermost scrolling box:

1. 如果与元素关联的文档与与元素关联的文档或与框关联的视口的来源不同，请终止这些步骤.
2. 让元素边界框成为元素上调用getBoundingClientRect()的返回值表示的框.
3. 让滚动框边缘A为滚动框的块流动方向上的开始边缘，让元素边缘A为与边界框在与滚动框边缘A相同的物理侧上的边界框边缘.
4. 让滚动框边缘B为滚动框的块流动方向上的结束边缘，让元素边缘B为元素边界框在与滚动框边缘B相同的物理边界上的边界.
5. 让滚动框边缘C为滚动框的内联基本方向上的起始边缘，让元素边缘C为与滚动框边缘C相同的物理边界上的元素边界框的边缘.
6. 让滚动框边缘D为滚动框的内联基本方向上的结束边缘，让元素边缘D为与滚动框边缘D相同的物理边界上元素边界框的边缘.
7. 让元素高度为元素边缘A与元素边缘B之间的距离.
8. 让滚动框高度为滚动框边缘A与滚动框边缘B之间的距离.
9. 让元素宽度为元素边缘C和元素边缘D之间的距离.
10. 让滚动框宽度为滚动框边缘C与滚动框边缘D之间的距离.

11. 通过执行以下步骤，使position成为滚动位置滚动框:

1. If the Document associated with element is not same origin with the Document associated with the element or viewport associated with box, terminate these steps.
2. Let element bounding border box be the box that the return value of invoking getBoundingClientRect() on element represents.
3. Let scrolling box edge A be the beginning edge in the block flow direction of scrolling box, and let element edge A be element bounding border box’s edge on the same physical side as that of scrolling box edge A.
4. Let scrolling box edge B be the ending edge in the block flow direction of scrolling box, and let element edge B be element bounding border box’s edge on the same physical side as that of scrolling box edge B.
5. Let scrolling box edge C be the beginning edge in the inline base direction of scrolling box, and let element edge C be element bounding border box’s edge on the same physical side as that of scrolling box edge C.
6. Let scrolling box edge D be the ending edge in the inline base direction of scrolling box, and let element edge D be element bounding border box’s edge on the same physical side as that of scrolling box edge D.
7. Let element height be the distance between element edge A and element edge B.
8. Let scrolling box height be the distance between scrolling box edge A and scrolling box edge B.
9. Let element width be the distance between element edge C and element edge D.
10. Let scrolling box width be the distance between scrolling box edge C and scrolling box edge D.

11. Let position be the scroll position scrolling box would have by following these steps:

• 如果块是开始"，则将元素边A与滚动框边A对齐.
• 否则，如果块为"end"，则将元素边缘B与滚动框边缘B对齐.
• 否则，如果块为中心"，则将元素边界边界框的中心与滚动框的中心沿滚动框的块流动方向对齐.

• 否则，阻止为最近":

• If block is "start", then align element edge A with scrolling box edge A.
• Otherwise, if block is "end", then align element edge B with scrolling box edge B.
• Otherwise, if block is "center", then align the center of element bounding border box with the center of scrolling box in scrolling box’s block flow direction.

• Otherwise, block is "nearest":

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对齐.

If inline is "start", then align element edge C with scrolling box edge C.

否则，内联是最近的":

Otherwise, inline is "nearest":

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.

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

If position is the same as scrolling box’s current scroll position, and scrolling box does not have an ongoing smooth scroll, then return.

如果滚动框与元素相关联

If scrolling box is associated with an element

Let associated element be the element.

如果滚动框与视口关联

If scrolling box is associated with a viewport

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

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

Perform a scroll of scrolling box to position, associated element as the associated element and behavior as the scroll behavior.

这篇关于scrollIntoView()方法实现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！