scrollIntoView() 不适用于水平滚动（Selenium）

Question

i want to scroll right to a column. This is what i tried:

((JavascriptExecutor) driver).executeScript("arguments[0].scrollIntoView(true);", element);

This works for vertical scrolling but not for horizontal.

Answer 1

Element.scrollIntoView()

Element.scrollIntoView() method scrolls the element on which it's called into the Viewport of the browser window.

---

Syntax

• element.scrollIntoView()
• element.scrollIntoView(alignToTop) // Boolean parameter
• element.scrollIntoView(scrollIntoViewOptions) // Object parameter

---

Parameters

The parameters for this method are:

• alignToTop (Optional): Is a Boolean value, if true, the top of the element will be aligned to the top of the visible area of the scrollable ancestor. This is the default value. If false, the bottom of the element will be aligned to the bottom of the visible area of the scrollable ancestor. Corresponds to scrollIntoViewOptions: {block: "end", inline: "nearest"}.
• scrollIntoViewOptions (Optional): Is an Object with the following properties:
  • behavior (Optional): Defines the transition animation. One of "auto" or "smooth". Defaults to "auto".
  • block (Optional): Defines vertical alignment. One of "start", "center", "end", or "nearest". Defaults to "start".
  • inline (Optional): Defines horizontal alignment. One of "start", "center", "end", or "nearest". Defaults to "nearest".

---

This usecase

As per your line of code:

((JavascriptExecutor) driver).executeScript("arguments[0].scrollIntoView(true);", element);

the argument true refers to boolean value for alignToTop . Hence the issue.

---

Solution

To automate horizontal scrolling you need to pass the argument for the inline parameter either among the following: - start - centre - end - nearest

---

Alternative

As an alternative you can use either of the following options

• scrollLeft() : Element.scrollLeft() property gets or sets the number of pixels that an element's content is scrolled from its left edge. If the element's direction is rtl (right-to-left), then scrollLeft is 0 when the scrollbar is at its rightmost position (at the start of the scrolled content), and then increasingly negative as you scroll towards the end of the content.
• scrollWidth() : Element.scrollWidth() read-only property is a measurement of the width of an element's content, including content not visible on the screen due to overflow.

---

Outro

You can find a couple of relevant detailed discussion in:

• What is the difference between the different scroll options?
• Selenium python Error: element could not be scrolled into view

Answer 2

you can use below option to scroll Horizontal

JavascriptExecutor js = (JavascriptExecutor)driver; 
js.executeScript("document.getElementById('giveLocationHorizontal').scrollLeft += 250", "");

Apart from that I assume below are also useful for you

//scroll up web page
   public void scrollUp(){
       JavascriptExecutor js = (JavascriptExecutor) driver;
       js.executeScript("window.scrollBy(0,-250)", "");
   }

    //scroll down web page
    public void scrollDown(){
        JavascriptExecutor js = (JavascriptExecutor) driver;
        js.executeScript("window.scrollBy(0,250)", "");
    }

    //scroll Horizontal
    public void scrollHorizontal(){
        JavascriptExecutor js = (JavascriptExecutor) driver;
        js.executeScript("window.scrollBy(250,0)", "");
    }

Answer 3

You can try with below if you have id

JavascriptExecutor js = (JavascriptExecutor)driver; 
js.executeScript(
    "document.getElementById('gvLocationHorizontalRail').scrollLeft += 250", "")

OR

jse.executeScript("window.scrollBy(1000,0)", "");

Source:

http://www.softwaretestingstudio.com/scroll-selenium-webdriver-java/

OR By Using actions

WebElement horizontalbar = driver.findElement(By.id("board") );
Actions action = new Actions(driver);

Actions moveToElement = action.moveToElement( horizontalbar );
for (int i = 0; i < 5; i++) {
    moveToElement.sendKeys(Keys.RIGHT).build().perform();
}

Source:

Selenium: horizontal scroll using Actions class

Answer 4

If you have the th tag of the column this should allow you to scroll to it

JavascriptExecutor jse = (JavascriptExecutor) driver;     
jse.executeScript("document.querySelector('table th:your-child').scrollIntoView();");

Answer 5

You can try one of below send keys:

element.sendKeys("\n");
element.sendKeys(Keys.SHIFT);
element.sendKeys(Keys.TAB);