scrollIntoView() 方法实现答案

【问题标题】：scrollIntoView() method implementationscrollIntoView() 方法实现
【发布时间】：2020-04-08 18:47:44
【问题描述】：

使用 javascript，我们可以使用 - 将元素显示在视图中 -

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

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

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

【问题讨论】：

标签： javascript selenium-webdriver

【解决方案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 对齐。
否则，如果块是“结束”，则将元素边缘 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 为“start”，则将元素边缘 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.

如果位置与滚动框当前滚动位置相同，且滚动框没有正在进行的平滑滚动，则返回。
如果滚动框与元素相关联
```
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.

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

【讨论】：

【解决方案2】：

您可以查看npm packagesrcoll-into-view的代码。它与浏览器实现不同，但足够接近以了解它在做什么。

【讨论】：

【解决方案3】：

试试下面的代码：

WebElement Element = driver.findElement(By.id("paid")); 
JavascriptExecutor js = (JavascriptExecutor) driver; 
js.executeScript("arguments[0].scrollIntoView();", Element);

【讨论】：

【解决方案4】：

document.getElementById() 返回DOM Element 对象。

scrollIntoView() in w3schools

定义和用法

scrollIntoView() 方法滚动指定元素进入浏览器窗口的可见区域。

我能找到的唯一代码是partial interface Element 中Element.webidl 中的注释行，但该行为是Extensions to the Element Interface 规范的一部分

scrollIntoView() in drafts.csswg.org

scrollIntoView(arg) 方法必须运行以下步骤：

让行为“自动”。

让块为“开始”。

让内联成为“最近的”。

如果 arg 是一个 ScrollIntoViewOptions 字典，那么：

将行为设置为选项的行为字典成员。

将块设置为选项的块字典成员。

将 inline 设置为选项的内联字典成员。

否则，如果 arg 为 false，则将 block 设置为“end”。

如果元素没有任何关联的布局框，则返回。

使用行为、块和内联将元素滚动到视图中。

可选择执行一些其他操作，将元素带到用户的注意力。

【讨论】：