# 如何在 Selenium Webdriver 中向下滾動或向上滾動頁面 > 原文： [https://www.guru99.com/scroll-up-down-selenium-webdriver.html](https://www.guru99.com/scroll-up-down-selenium-webdriver.html) ## 什么是滾動條？ 如果當前頁面滾動不適合屏幕的可見區域，則滾動條可以讓您沿水平或垂直方向在屏幕上移動。 它用于上下移動窗口。 Selenium Webdriver 在操縱 DOM 時不需要滾動即可執行操作。 但是在某些網頁中，元素只有在用戶滾動到它們之后才可見。 在這種情況下，可能需要滾動。 滾動條有兩種類型：**水平**和**垂直**滾動條，如下面的屏幕快照所示。   ## 滾動硒 要使用 Selenium 滾動，可以使用 JavaScriptExecutor 界面，該界面可幫助通過 Selenium Webdriver 執行 JavaScript 方法 進一步了解 [JavaScriptExecutor](/execute-javascript-selenium-webdriver.html) 句法 ： ``` JavascriptExecutor js = (JavascriptExecutor) driver; js.executeScript(Script,Arguments); ``` * 腳本–這是需要執行的 JavaScript。 * 參數–它是腳本的參數。 它是可選的。 **Selenium Script 向下滾動頁面** 讓我們在以下 3 種情況下使用 selenium webdriver 向下滾動網頁： * [場景 1：按像素向下滾動網頁。](#1) * [場景 2：根據元素的可見性向下滾動網頁。](#2) * [場景 3：向下滾動頁面底部的網頁。](#3) * [場景 4：在網頁上水平滾動。](#4) **方案 1：按像素向下滾動網頁。** **硒腳本** ``` import org.openqa.selenium.JavascriptExecutor; import org.openqa.selenium.WebDriver; import org.openqa.selenium.chrome.ChromeDriver; import org.testng.annotations.Test; public class ScrollByPixel { WebDriver driver; @Test public void ByPixel() { System.setProperty("webdriver.chrome.driver", "E://Selenium//Selenium_Jars//chromedriver.exe"); driver = new ChromeDriver(); JavascriptExecutor js = (JavascriptExecutor) driver; // Launch the application driver.get("http://demo.guru99.com/test/guru99home/"); //To maximize the window. This code may not work with Selenium 3 jars. If script fails you can remove the line below driver.manage().window().maximize(); // This will scroll down the page by 1000 pixel vertical js.executeScript("window.scrollBy(0,1000)"); } } ``` **腳本描述**：在上面的代碼中，我們首先在 Chrome 瀏覽器中啟動給定的 URL。 接下來，通過 executeScript 將頁面滾動 1000 像素。 Javascript 方法 ScrollBy（）將網頁滾動到特定的像素數。 ScrollBy（）方法的語法為： ``` executeScript("window.scrollBy(x-pixels,y-pixels)"); ``` x-pixels 是 x 軸上的數字，如果 number 為正數則向左移動，如果 number 為負數則向右移動.y-pixels 是 y-axis 的數字，如果 number 為 y 則向下移動。 正數，如果數字為負數，則向上移動。 例： ``` js.executeScript("window.scrollBy(0,1000)"); //Scroll vertically down by 1000 pixels ``` **輸出分析：**這是執行上述腳本時的輸出。  **方案 2：通過元素的可見性向下滾動網頁。** **Selenium Script** ``` 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 org.testng.annotations.Test; public class ScrollByVisibleElement { WebDriver driver; @Test public void ByVisibleElement() { System.setProperty("webdriver.chrome.driver", "G://chromedriver.exe"); driver = new ChromeDriver(); JavascriptExecutor js = (JavascriptExecutor) driver; //Launch the application driver.get("http://demo.guru99.com/test/guru99home/"); //Find element by link text and store in variable "Element" WebElement Element = driver.findElement(By.linkText("Linux")); //This will scroll the page till the element is found js.executeScript("arguments[0].scrollIntoView();", Element); } } ``` **腳本描述：**在上面的代碼中，我們首先在 Chrome 瀏覽器中啟動給定的 url。 接下來，滾動頁面，直到提到的元素在當前頁面上可見。 Javascript 方法 scrollIntoView（）滾動頁面，直到提到的元素處于完整視圖： ``` js.executeScript("arguments[0].scrollIntoView();",Element ); ``` “ arguments [0]”表示頁面的第一個索引，從 0 開始。 其中“ Element”是網頁上的定位符。 **Output analysis :** Here is the output when you execute the above script .  **方案 3：向下滾動頁面底部的網頁。** **Selenium Script** ``` import org.openqa.selenium.JavascriptExecutor; import org.openqa.selenium.WebDriver; import org.openqa.selenium.chrome.ChromeDriver; import org.testng.annotations.Test; public class ScrollByPage { WebDriver driver; @Test public void ByPage() { System.setProperty("webdriver.chrome.driver", "E://Selenium//Selenium_Jars//chromedriver.exe"); driver = new ChromeDriver(); JavascriptExecutor js = (JavascriptExecutor) driver; // Launch the application driver.get("http://demo.guru99.com/test/guru99home/"); //This will scroll the web page till end. js.executeScript("window.scrollTo(0, document.body.scrollHeight)"); } } ``` **腳本描述：**在上面的代碼中，我們首先在 Chrome 瀏覽器中啟動給定的 url。 接下來，滾動到頁面底部。 Javascript 方法 scrollTo（）滾動到頁面末尾。 ``` js.executeScript("window.scrollTo(0, document.body.scrollHeight)"); ``` “ document.body.scrollHeight”返回正文（即網頁）的完整高度。 **輸出分析：**這是執行上述腳本時的輸出。 [ ](/images/1/120817_0811_ScrollUPorD5.png) **方案 4：在網頁上水平滾動。** **Selenium Script** ``` 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 org.testng.annotations.Test; public class HorizontalScroll { WebDriver driver; @Test public void ScrollHorizontally() { System.setProperty("webdriver.chrome.driver", "E://Selenium//Selenium_Jars//chromedriver.exe"); driver = new ChromeDriver(); JavascriptExecutor js = (JavascriptExecutor) driver; // Launch the application driver.get("http://demo.guru99.com/test/guru99home/scrolling.html"); WebElement Element = driver.findElement(By.linkText("VBScript")); //This will scroll the page Horizontally till the element is found js.executeScript("arguments[0].scrollIntoView();", Element); } } ``` **腳本描述：**在上面的代碼中，我們首先在 Chrome 瀏覽器中啟動給定的 url。 接下來，水平滾動頁面，直到提到的元素在當前頁面上可見。 Javascript 方法 scrollIntoView（）滾動頁面，直到提到的元素處于完整視圖： ``` js.executeScript("arguments[0].scrollIntoView();",Element ); ``` **Output analysis:** Here is the output when you execute the above script.  ## 摘要 * 在上面的教程中，我們說明了在不同情況下網頁的滾動。 * 在第一種情況下，我們逐像素顯示了向下滾動。 * 在第二種情況下，我們顯示了頁面的向下滾動，直到元素可見為止。 * 在第三種情況下，我們在頁面底部顯示了頁面的向下滾動。 * 在第四種情況下，說明了網頁上的水平滾動。