Scrolling is a common requirement when automating modern web applications, as many pages use long layouts, lazy-loaded content, fixed headers, and dynamic elements that are not visible in the initial viewport. This can cause Selenium to fail when interacting with elements unless they are manually scrolled into view. In such situations, automating scroll operations becomes essential. This article explains different ways to scroll an element into view using Selenium WebDriver.
1. Maven Dependencies
To use Selenium WebDriver with Java, we must include Selenium and optionally, WebDriverManager for managing browser drivers.
<dependency>
<groupId>org.seleniumhq.selenium</groupId>
<artifactId>selenium-java</artifactId>
<version>4.38.0</version>
</dependency>
<dependency>
<groupId>io.github.bonigarcia</groupId>
<artifactId>webdrivermanager</artifactId>
<version>6.3.3</version>
</dependency>
The selenium-java dependency provides the WebDriver API and browser-specific implementations. webdrivermanager helps download and manage Chrome, Firefox, and Edge drivers automatically, removing the need to manually store binaries.
2. Scroll Element Into View Using JavaScriptExecutor
JavaScriptExecutor is the most reliable and direct method for scrolling elements into view. Many modern web apps have complex CSS, animations, or dynamic layouts, and JavaScript scroll commands bypass these limitations. The JavaScript function scrollIntoView() immediately scrolls the page to bring the target element into the visible viewport.
public class ScrollIntoViewExample {
public static void main(String[] args) {
WebDriverManager.chromedriver().setup();
WebDriver driver = new ChromeDriver();
try {
driver.get("http://127.0.0.1:8080/");
// Locate the element far below the fold
WebElement element = driver.findElement(By.id("target-section"));
// Scroll the element into view using JavaScript
JavascriptExecutor js = (JavascriptExecutor) driver;
js.executeScript("arguments[0].scrollIntoView(true);", element);
// Interact with the element
element.click();
System.out.println("Element scrolled into view and clicked!");
} finally {
driver.quit();
}
}
}
The script loads a page with long content, locates the target element using By.id, scrolls to it instantly using JavaScript, and then interacts with the element safely.
3. Scroll by Pixel Values
Sometimes we need finer control, such as simulating user scrolling, adjusting for sticky headers, or scrolling incrementally for pages that load content continuously. In these situations, scrolling by pixel values using JavaScript is more suitable.
public class ScrollByPixelsExample {
public static void main(String[] args) throws InterruptedException {
WebDriverManager.chromedriver().setup();
WebDriver driver = new ChromeDriver();
try {
driver.get("http://127.0.0.1:8080/");
JavascriptExecutor js = (JavascriptExecutor) driver;
// Scroll down 500 pixels
js.executeScript("window.scrollBy(0, 500);");
Thread.sleep(1000);
// Scroll down another 1000 pixels
js.executeScript("window.scrollBy(0, 1000);");
Thread.sleep(1000);
// Scroll up 300 pixels
js.executeScript("window.scrollBy(0, -300);");
Thread.sleep(1000);
System.out.println("Scrolling by pixel values completed!");
} finally {
driver.quit();
}
}
}
4. Scroll Element Into View Using the Actions Class
Selenium’s Actions class simulates real user mouse movement. When we call moveToElement(), Selenium scrolls automatically until the element becomes visible. This does not use JavaScript.
public class ScrollUsingActionsExample {
public static void main(String[] args) {
WebDriverManager.chromedriver().setup();
WebDriver driver = new ChromeDriver();
try {
driver.get("http://127.0.0.1:8080/");
WebElement element = driver.findElement(By.id("target-section"));
Actions actions = new Actions(driver);
actions.moveToElement(element).perform();
element.click();
System.out.println("Actions API scrolled to element successfully!");
} finally {
driver.quit();
}
}
}
The Actions class moves the mouse pointer to the target element, and if the element is outside the visible viewport, Selenium automatically scrolls the page to bring it into view.
5. Scroll to the Bottom of the Page
In some web applications, it is often necessary to scroll all the way to the bottom of a page to ensure that all elements are loaded and accessible for interaction. Selenium provides a simple way to accomplish this using JavaScriptExecutor.
public class ScrollToBottomExample {
public static void main(String[] args) throws InterruptedException {
WebDriverManager.chromedriver().setup();
WebDriver driver = new ChromeDriver();
driver.manage().window().maximize();
try {
driver.get("http://127.0.0.1:8080/");
JavascriptExecutor js = (JavascriptExecutor) driver;
js.executeScript("window.scrollTo(0, document.body.scrollHeight);");
Thread.sleep(1500); // see scroll reach bottom
System.out.println("Scrolled to the bottom of the page!");
} finally {
driver.quit();
}
}
}
The document.body.scrollHeight property represents the total scrollable height of the entire page, allowing you to determine how far the page can be scrolled vertically.
6. Scroll to the Top of the Page
Sometimes we need to reset to the top before performing new actions. This can be helpful after navigating deep into the page or scrolling extensively.
public class ScrollToTopExample {
public static void main(String[] args) throws InterruptedException {
WebDriverManager.chromedriver().setup();
WebDriver driver = new ChromeDriver();
driver.manage().window().maximize();
try {
driver.get("http://127.0.0.1:8080/");
JavascriptExecutor js = (JavascriptExecutor) driver;
// Scroll to the top
js.executeScript("window.scrollTo(0, 0);");
Thread.sleep(1500); // visually confirm scroll to top
System.out.println("Returned to top of the page!");
} finally {
driver.quit();
}
}
}
In this example, the script navigates to the target webpage and uses a JavascriptExecutor to scroll to the top by setting the vertical scroll position to 0.
The sample HTML page used to demonstrate the scrolling techniques discussed above is provided below for reference and testing.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Selenium Long Page Scroll Test</title>
<style>
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
.section {
height: 700px;
padding: 40px;
border-bottom: 1px solid #ddd;
}
#target-section {
background: #f7f7ff;
border: 2px solid #4a4aff;
padding: 50px;
height: 400px;
}
#scroll-container {
height: 250px;
width: 80%;
overflow-y: auto;
border: 2px solid #666;
padding: 10px;
margin-top: 30px;
}
.inner-item {
height: 200px;
border: 1px solid #ccc;
padding: 15px;
margin-bottom: 10px;
}
#target-element {
background: #ffe4b5;
border: 2px dashed #ff9900;
padding: 20px;
}
</style>
</head>
<body>
<h1>Selenium Long Page Test</h1>
<p>This page is intentionally long to test scrolling using Selenium WebDriver.</p>
<!-- Section 1 -->
<div class="section" style="background:#fafafa;">
<h2>Section 1</h2>
<p>Scroll down to test Selenium scrollIntoView.</p>
</div>
<!-- Section 2 -->
<div class="section" style="background:#f0f0f0;">
<h2>Section 2</h2>
<p>More scrolling content...</p>
</div>
<!-- Section 3 -->
<div class="section" style="background:#e8e8e8;">
<h2>Section 3</h2>
<p>Keep scrolling...</p>
</div>
<!-- Section 4 -->
<div class="section" style="background:#e0e0e0;">
<h2>Section 4</h2>
<p>This section is still far from the target.</p>
</div>
<!-- Section 5 -->
<div class="section" style="background:#d8d8d8;">
<h2>Section 5</h2>
<p>Almost there...</p>
</div>
<!-- Target Section -->
<div id="target-section">
<h2>Target Section</h2>
<p>This is the element Selenium will scroll into view using scrollIntoView().</p>
<button id="click-me">Click Me Button</button>
</div>
<!-- Bottom Spacer -->
<div class="section" style="background:#ccc;">
<h2>Bottom Section</h2>
<p>This helps test scroll-to-bottom functionality.</p>
</div>
</body>
</html>
7. Conclusion
In this article, we explored various techniques to scroll elements into view using Selenium WebDriver, including JavaScript, Actions, and pixel-based scrolling, enabling reliable interaction with dynamic and long web pages.
8. Download the Source Code
This article explained how to scroll an element into view using Selenium.
You can download the full source code of this example here: Sign up
