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

This scrolls the element into view but it goes behind the header on the page.

How can I scroll element into view so that the element is right below the header instead of behind the header?

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

This scrolls the element into view but it goes behind the header on the page.

How can I scroll element into view so that the element is right below the header instead of behind the header?

• javascript
• selenium

3 Answers 3

The method scrollIntoView can scroll the element at the top or at the bottom of the view with the default being at the top:

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

So you could scroll it at the bottom instead:

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

You could also scroll it at the top and then by a 1/4th of the height of the view:

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

Or just below your fixed header:

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

If you need to focus on the specific element try the following:

JavascriptExecutor js =(JavascriptExecutor)driver;
WebElement element =(WebElement)js.executeScript("document.querySelector('#urID').focus()");

• You need to change #urID to proper CSS locator.

Please try this "scrollIntoViewIfNeeded()". hopefully it will automatically handle the position. i am trying in Salesforce Site. it is working fine

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

*Notes : In Mozilla it is not supported. if you will work on Chrome and Edge then it might work fine.