Scroll เฉพาะ DIV Element ด้วย Selenium WebDriver ใน Java

เมื่อต้องการ scroll ภายใน scrollable DIV (ไม่ใช่หน้าจอทั้งหมด) ใช้ JavascriptExecutor กับ scrollIntoView() หรือกำหนด scrollTop โดยตรง

Syntax

WebElement divElement = driver.findElement(By.xpath("//div[@class='scrollable-div']"));

// วิธีที่ 1: scrollIntoView (scroll จน element เข้ามาในมุมมอง)
((JavascriptExecutor) driver).executeScript("arguments[0].scrollIntoView(true);", divElement);

// วิธีที่ 2: กำหนด scrollTop โดยตรง (สำหรับ scroll ภายใน container)
((JavascriptExecutor) driver).executeScript("arguments[0].scrollTop = arguments[0].scrollHeight;", divElement);

ตัวอย่างโค้ดสมบูรณ์

import org.openqa.selenium.By;
import org.openqa.selenium.JavascriptExecutor;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import java.util.concurrent.TimeUnit;

public class ScrollDivExample {
    public static void main(String[] args) {
        System.setProperty("webdriver.chrome.driver", 
            "C:\\Users\\ghs6kor\\Desktop\\Java\\chromedriver.exe");

        WebDriver driver = new ChromeDriver();
        driver.manage().timeouts().implicitlyWait(10, TimeUnit.SECONDS);
        driver.manage().window().maximize();

        try {
            driver.get("https://www.tutorialspoint.com/index.htm");

            // หา scrollable DIV (เช่น carousel/slider)
            WebElement scrollableDiv = driver.findElement(
                By.xpath("//div[@class='slick-track']"));

            // Scroll ไปยัง element นี้
            ((JavascriptExecutor) driver).executeScript(
                "arguments[0].scrollIntoView(true);", scrollableDiv);

            Thread.sleep(1000);

            // หรือ scroll ภายใน div เอง (ถ้า div มี overflow: auto/scroll)
            ((JavascriptExecutor) driver).executeScript(
                "arguments[0].scrollTop = arguments[0].scrollHeight;", scrollableDiv);

            System.out.println("Scrolled to div successfully");

        } catch (Exception e) {
            e.printStackTrace();
        } finally {
            driver.quit();
        }
    }
}

วิธี Scroll ต่างๆ ภายใน DIV

ตัวอย่าง: Scroll ลงทีละนิด (Infinite Scroll)

public void scrollDivGradually(WebElement div, int pixelsPerStep, int delayMs) {
    JavascriptExecutor js = (JavascriptExecutor) driver;
    Long scrollHeight = (Long) js.executeScript("return arguments[0].scrollHeight", div);
    Long clientHeight = (Long) js.executeScript("return arguments[0].clientHeight", div);
    long maxScroll = scrollHeight - clientHeight;

    long currentScroll = 0;
    while (currentScroll < maxScroll) {
        js.executeScript("arguments[0].scrollTop = arguments[1]", div, currentScroll);
        currentScroll += pixelsPerStep;
        try { Thread.sleep(delayMs); } catch (InterruptedException ignored) {}
    }
    // Scroll ท้ายสุด
    js.executeScript("arguments[0].scrollTop = arguments[0].scrollHeight", div);
}

⚠️ ข้อควรระวัง

• Element ต้องมี CSS overflow: auto หรือ overflow: scroll ถึงจะ scroll เองได้
• scrollIntoView scroll หน้าจอทั้งหน้า ไม่ใช่ scroll ภายใน div
• ใช้ scrollTop / scrollBy สำหรับ scroll ภายใน container
• บางเว็บไซต์ใช้ virtual scrolling (render แค่ที่มองเห็น) → ต้อง scroll ทีละนิดเพื่อโหลดข้อมูล

Best Practice: รอจนกว่า Scroll เสร็จ

// รอจนกว่า scroll position จะถึงเป้าหมาย
new WebDriverWait(driver, Duration.ofSeconds(5)).until(
    d -> ((Long) ((JavascriptExecutor) d).executeScript(
        "return arguments[0].scrollTop", divElement)) >= targetPosition);