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

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()

Element.scrollIntoView()方法将调用它的元素滚动到 Viewport 中浏览器窗口。

• 语法:

  • element.scrollIntoView()
  • element.scrollIntoView(alignToTop)// bool 参数
  • 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"}。

---

窗口.scrollBy()

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

• 语法:

  • window.scrollBy(x-coord, y-coord)
  • window.scrollBy(选项)

• 参数:

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

• 您的用例:

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

---

窗口.scrollTo()

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

• 语法:

  • window.scrollTo(x-coord, y-coord)
  • window.scrollTo(选项)

• 参数:

  • x-coord 是您想要显示在左上角的沿文档水平轴的像素。
  • y-coord 是您想要显示在左上角的文档垂直轴上的像素。
  • options 是一个 ScrollToOptions字典。

• 您的用例:

  • executeScript("window.scrollTo(0, document.body.scrollHeight)"):这行代码会将窗口中的文档向下滚动到<页面的 strong>底部。