Skip to main content

scrollIntoView

Overview​

Use the scrollIntoView command to scroll to a specified element.

info
Also see Element.scrollIntoView() on MDN.

Usage​

await browser.$(selector).scrollIntoView();

or

await browser.$(selector).scrollIntoView(alignToTop);

or

await browser.$(selector).scrollIntoView({ behavior, block, inline });

Command Parameters​

NameTypeDefaultDescription
alignToTopBooleantrueIf true, the top of the element will be aligned to the top of the scrollable ancestor's visible area. Corresponds to {block: 'start', inline: 'nearest'}. If false, the bottom of the element will be aligned to the bottom of the scrollable ancestor's visible area. Corresponds to {block: 'end', inline: 'nearest'}.
behaviorString"auto"Specifies the scrolling animation: "auto" or "smooth".
blockString"start"Specifies vertical alignment: "start", "center", "end", or "nearest".
inlineString"nearest"Specifies horizontal alignment: "start", "center", "end", or "nearest".

Usage Examples​

it("should demonstrate the scrollIntoView command", async ({ browser }) => {
    const elem = await browser.$("#myElement");

    // scroll the element into view
    await elem.scrollIntoView();

    // scroll the element to the center of the viewport
    await elem.scrollIntoView({ block: "center", inline: "center" });
});

References​

We'd like to give credit to the original WebdriverIO docs article, from which we drew some information while writing our version.