不同的滚动选项有什么区别？答案

【问题标题】：What is the difference between the different scroll options?不同的滚动选项有什么区别？
【发布时间】：2019-07-07 22:26:25
【问题描述】：

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

第一：

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)");

【问题讨论】：

您是否尝试过在谷歌上搜索每种方法的文档？
当然，第一个和第二个假设移动到元素，-我只是不知道语法不同，为什么在相同的情况下（表）只有第一个有效。据我所知，第三个是按像素移动，第四个我不明白。还有更多吗？
嗯，第一个示例中的Element 对象是如何得到的？根据文档，在scrollIntoView(true) 中包含true 应该不会产生影响，因为默认情况下true 用于scrollIntoView()。
scrollTo(x,y) 会按照它的建议进行操作 - 即滚动到您提供的坐标。这意味着.scrollTo(1,1) 将导致1,1 的像素位置位于视口的左上角。
关于第一个示例，您之前运行过：WebElement Element = driver.findElement(By.linkText("blaBla"));，我不知道它为什么有效，但只有第一个有效，奇怪但真实。 scrollTo 没有列出，所以我们有五个？或者共有哪些选项？

标签： javascript selenium js-scrollintoview js-scrollby js-scrollto

【解决方案1】：

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水平像素和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)")：这行代码会将窗口中的文档向下滚动到页面的bottom。

【讨论】：

所以我们 3 个卷轴，第一个和第二个在 JS 方面的语法有什么区别？第二个有元素，第一个首先在 JS 上声明
executeScript("arguments[0].scrollIntoView();", Element) 相当于executeScript("arguments[0].scrollIntoView(true);", element1)，正如我在回答中提到的那样，后者是默认值
我的意思是这三个： // 垂直滚动 1000 像素，水平滚动 0 像素 JavascriptExecutor js = (JavascriptExecutor) driver; js.executeScript("window.scrollBy(0,1000)"); // 向下滚动到浏览器中的元素 JavascriptExecutor js = (JavascriptExecutor) driver; js.executeScript("arguments[0].scrollIntoView();", Element); // 向下滚动到页面底部 @987654358 @ 剩下的一个问题是为什么在我的第二个原始 exm 中，语法与其他语法不同？
嗯，executeScript() 和 arguments[0] 适用于 WebElements 而 executeScript() 和 document.body 适用于 当前浏览上下文 即当前窗口。它回答了你的问题吗？
嗯，((JavascriptExecutor) driver).executeScript("arguments[0].scrollIntoView(true);", element1); 将在 WebElement 上工作，js.executeScript("arguments[0].scrollIntoView();", Element); 将在窗口上工作，直到到达元素？我没有看到这里有很大的不同，我错了吗？

【解决方案2】：

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

.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?

【讨论】：

和滚动？据我所知，我的第四个例子是水平的