javascript - scrollIntoView() 方法实现

Question

使用 javascript，我们可以使用 -

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

我可以理解scrollIntoView()方法的概念，但只是想知道它的代码并了解它是如何实现的。

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

标签： javascriptselenium-webdriver

Answer 1

滚动视图（）

该scrollIntoView()方法滚动元素的父容器，以便scrollIntoView()调用的元素对用户可见。

---

scrollIntoView() 的实现

CSSOM视图模块规范包含由执行的步骤序列，scrollIntoView()如下所示：

1. 让行为成为“自动”。
2. 让块成为“开始”。
3. 让 inline 成为“最近的”。
4. 如果 arg 是ScrollIntoViewOptions字典，则：
   • 将行为设置为选项的行为字典成员。
   • 将块设置为选项的块字典成员。
   • 将 inline 设置为选项的内联字典成员。
5. 否则，如果 arg 为 false，则将 block 设置为“end”。
6. 如果该元素没有任何关联的布局框，则返回。
7. 使用行为、块和内联将元素滚动到视图中。
8. 可以选择执行一些其他操作，使元素引起用户的注意。

---

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

将元素滚动到视图元素中，具有滚动行为行为、块流向位置块和内联基本方向位置内联，意味着为建立滚动框滚动框的每个祖先元素或视口运行这些步骤，依次从最里面到最外面的滚动框：

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. 按照以下步骤，让位置为滚动框的滚动位置：

    • 如果块是“开始”，则将元素边缘 A 与滚动框边缘 A 对齐。
    • 否则，如果块是“结束”，则将元素边缘 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.
      

    • 如果 inline 是“开始”，则将元素边缘 C 与滚动框边缘 C 对齐。

    • 否则，如果 inline 为“end”，则将元素边缘 D 与滚动框边缘 D 对齐。
    • 否则，如果 inline 为“center”，则将元素边界框的中心与滚动框的内联基本方向上的滚动框的中心对齐。

    • 否则， inline 是“最近的”：

      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.
      

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

13. 如果滚动框与元素相关联

    Let associated element be the element.
    

14. 如果滚动框与视口相关联

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

15. 执行滚动框的滚动定位，关联元素作为关联元素，行为作为滚动行为。