滚动元素到视图中而不与页眉重叠

Selenium JavaScript - scroll element into view without overlapping with header

本文关键字：重叠 元素 视图 滚动      更新时间：2023-09-26
webdriver.executeScript("arguments[0].scrollIntoView();", element);

这将元素滚动到视图中，但它位于页面标题的后面。

如何滚动元素进入视图，使元素在标题的正下方，而不是在标题后面?

方法scrollIntoView可以在视图的顶部或底部滚动元素，默认是在顶部:

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

所以你可以在底部滚动它:

webdriver.executeScript("arguments[0].scrollIntoView(false);", element);

你也可以在顶部滚动然后在视图高度的1/4处滚动

webdriver.executeScript("arguments[0].scrollIntoView(true); window.scrollBy(0, -window.innerHeight / 4);", element);

或者就在你的固定标题下面:

webdriver.executeScript("arguments[0].scrollIntoView(true); window.scrollBy(0, -arguments[1].offsetHeight);", element, header);

如果您需要专注于特定元素，请尝试以下操作:

JavascriptExecutor js =(JavascriptExecutor)driver;
WebElement element =(WebElement)js.executeScript("document.querySelector('#urID').focus()");
  • 你需要把#urID改成合适的CSS定位符。

请尝试此scrollIntoViewIfNeeded()"希望它能自动处理这个位置。我正在尝试在Salesforce网站。It is working fine

((JavascriptExecutor) webDriver).executeScript("arguments[0].scrollIntoViewIfNeeded();", element)

*注意:在Mozilla中不支持。如果你在Chrome和Edge上工作，那么它可能会工作得很好。

相关文章：