Selenium JavaScript - scroll element into view without overlapping with header

Question

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?

Answer 1

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.org/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);