不同的滚动选项之间有什么区别？

Question

我尝试了几种向表格添加滚动的方法，但只有一种方法可以正常工作。它们有什么区别？

第一个：

JavascriptExecutor js = (JavascriptExecutor) driver;
js.executeScript("arguments[0].scrollIntoView();", Element);

第二个：

WebElement element1 = driver.findElement(By.id("scrolled_element"));
((JavascriptExecutor) driver).executeScript("arguments[0].scrollIntoView(true);", element1);

第三名：

JavascriptExecutor js = (JavascriptExecutor) driver;
js.executeScript("window.scrollBy(0,1000)");

第四名：

JavascriptExecutor js = (JavascriptExecutor) driver;
js.executeScript("window.scrollTo(0, document.body.scrollHeight)");

Answer 1

我会在每个例子下面放上相关的文档，方便大家自己参考，并给出一些非常浅薄的看法：

---

.scrollIntoView() 与 .scrollIntoView(true)

https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView

应该没有区别，因为文档指出默认情况下，.scrollIntoView() 实际上具有默认值 true。

---

.scrollBy()

https://www.w3schools.com/jsref/met_win_scrollby.asp

按指示的像素滚动文档。这意味着如果您的左上角视口位于 (10,10)，则执行 .scrollby(5,6) 意味着视口在移动后将位于 (15,16).

的像素坐标处

---

.scrollTo()

https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollTo

按照它的建议行事 -- 即滚动 到 您提供的坐标。这与滚动 by 不同（即上面的示例）。这意味着 .scrollTo(1,1) 将滚动文档，以便您的左上角视口现在位于 (1,1) 的像素坐标处，而不管它之前是什么。

---

关于您的单独问题，即总滚动选项是什么——好吧，还有 window.scroll()，但根据下面的 SO 文章，与 scrollTo() 应该没有任何区别：

JavaScript window.scroll vs. window.scrollTo?

Answer 2

Element.scrollIntoView()

Element.scrollIntoView() method scrolls the element on which it's called into the Viewport 浏览器 window.

• 语法：

  • element.scrollIntoView()
  • element.scrollIntoView(alignToTop) // 布尔参数
  • element.scrollIntoView(scrollIntoViewOptions) // 对象参数

• 您的用例：

  • executeScript("arguments[0].scrollIntoView();", Element)：这行代码会将元素滚动到浏览器的可见区域window.
  • executeScript("arguments[0].scrollIntoView(true);", element1)：这行代码会将要滚动的元素对齐到可滚动祖先的Viewport的顶部。此选项对应 scrollIntoViewOptions: {block: "start", inline: "nearest"}。基本上，这是默认值。
  • executeScript("arguments[0].scrollIntoView(false)", element1);：这行代码会将要滚动的元素对齐到可滚动祖先Viewport的底部。该选项对应于scrollIntoViewOptions: {block: "end", inline: "nearest"}.

---

Window.scrollBy()

window.scrollBy() 方法按给定的量滚动当前 window 中的文档。

• 语法：

  • window.scrollBy(x-coord, y-coord)
  • window.scrollBy(options)

• 参数：

  • x-coord 是您要滚动的水平像素值。
  • y-coord 是您要滚动的垂直像素值。
  • options 是 ScrollToOptions 字典。

• 您的用例：

  • executeScript("window.scrollBy(0,1000)")：这行代码会将文档在window向下滚动0 水平像素和 1000 要滚动的垂直像素。

---

Window.scrollTo()

Window.scrollTo() 方法滚动到文档中的一组特定坐标。

• 语法：

  • window.scrollTo(x-coord, y-coord)
  • window.scrollTo(options)

• 参数：

  • x-coord 是您想要显示在左上角的文档横轴上的像素。
  • y-coord 是您想要显示在左上角的文档纵轴上的像素。
  • options 是 ScrollToOptions 字典。

• 您的用例：

  • executeScript("window.scrollTo(0, document.body.scrollHeight)")：这行代码会将文档从 window down 滚动到 bottom 页面。