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

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)的像素坐标处。

---

.scrollToView（）

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()方法将调用该元素的元素滚动到浏览器窗口的Viewport中。

• 语法：

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

• 您的用例：

  • executeScript("arguments[0].scrollIntoView();", Element)：这行代码会将元素滚动到浏览器窗口的可见区域。
  • 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.scrollBy(x-coord, y-coord)
  • window.scrollBy(options)

• 参数：

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

• 您的用例：

  • executeScript("window.scrollBy(0,1000)")：这行代码将在窗口中向下滚动文档，水平滚动像素 0 和 {{1 }} 您要滚动的垂直像素。

---

Window.scrollTo（）

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

• 语法：

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

• 参数：

  • window.scrollTo(options)是要在左上方显示的文档水平轴上的像素。
  • x-coord是要显示在文档左上角的文档垂直轴上的像素。
  • y-coord是ScrollToOptions字典。

• 您的用例：

  • options：这行代码将使文档在窗口中向下滚动到页面的 executeScript("window.scrollTo(0, document.body.scrollHeight)") 。