# scrollIntoView

Scroll element into viewport for Desktop/Mobile Web **AND** Mobile Native Apps.

info

Scrolling for Mobile Native Apps is done based on the mobile `swipe` command.

info

On Desktop/Mobile Web, browsers apply wheel-driven scrolling asynchronously, so this command waits until the scroll position stops changing before resolving. This ensures the element is actually in its final position by the time subsequent commands run.

## Usage[​](#usage "Direct link to Usage")

```
await $(selector).scrollIntoView({ behavior, block, inline, direction, maxScrolls, duration, scrollableElement, percent })
```

## Parameters[​](#parameters "Direct link to Parameters")

| Name                                        | Type              | Details                                                                                                                                                                                                                                                                                                                                                                      |
| ------------------------------------------- | ----------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `options`<br />*optional*                   | `object, boolean` | options for `Element.scrollIntoView()`. Default for desktop/mobile web:<br />`{ block: 'start', inline: 'nearest' }`<br />Default for Mobile Native App<br />`{ maxScrolls: 10, scrollDirection: 'down' }`                                                                                                                                                                   |
| **Desktop/Mobile Web Only**                 |                   |                                                                                                                                                                                                                                                                                                                                                                              |
| `options.behavior`<br />*optional*          | `string`          | See [MDN Reference](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView).<br />**WEB-ONLY** (Desktop/Mobile)                                                                                                                                                                                                                                             |
| `options.block`<br />*optional*             | `string`          | See [MDN Reference](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView).<br />**WEB-ONLY** (Desktop/Mobile)                                                                                                                                                                                                                                             |
| `options.inline`<br />*optional*            | `string`          | See [MDN Reference](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView).<br />**WEB-ONLY** (Desktop/Mobile)                                                                                                                                                                                                                                             |
| **Mobile Native App Only**                  |                   |                                                                                                                                                                                                                                                                                                                                                                              |
| `options.direction`<br />*optional*         | `string`          | Can be one of `down`, `up`, `left` or `right`, default is `up`.<br />**MOBILE-NATIVE-APP-ONLY**                                                                                                                                                                                                                                                                              |
| `options.maxScrolls`<br />*optional*        | `number`          | The max amount of scrolls until it will stop searching for the element, default is `10`.<br />**MOBILE-NATIVE-APP-ONLY**                                                                                                                                                                                                                                                     |
| `options.duration`<br />*optional*          | `number`          | The duration in milliseconds for the swipe. Default is `1500` ms. The lower the value, the faster the swipe.<br />**MOBILE-NATIVE-APP-ONLY**                                                                                                                                                                                                                                 |
| `options.scrollableElement`<br />*optional* | `Element`         | Element that is used to scroll within. If no element is provided it will use the following selector for iOS `-ios predicate string:type == "XCUIElementTypeApplication"` and the following for Android `//android.widget.ScrollView'`. If more elements match the default selector, then by default it will pick the first matching element.<br />**MOBILE-NATIVE-APP-ONLY** |
| `options.percent`<br />*optional*           | `number`          | The percentage of the (default) scrollable element to swipe. This is a value between 0 and 1. Default is `0.95`.<br />**NEVER** swipe from the exact top\|bottom\|left\|right of the screen, you might trigger for example the notification bar or other OS/App features which can lead to unexpected results.<br />**MOBILE-NATIVE-APP-ONLY**                               |

## Examples[​](#examples "Direct link to Examples")

desktop.mobile.web.scrollIntoView\.js

```
it('should demonstrate the desktop/mobile web scrollIntoView command', async () => {
    const elem = await $('#myElement');
    // scroll to specific element
    await elem.scrollIntoView();
    // center element within the viewport
    await elem.scrollIntoView({ block: 'center', inline: 'center' });
});
```

mobile.native.app.scrollIntoView\.js

```
it('should demonstrate the mobile native app scrollIntoView command', async () => {
    const elem = await $('#myElement');
    // scroll to a specific element in the default scrollable element for Android or iOS for a maximum of 10 scrolls
    await elem.scrollIntoView();
    // Scroll to the left in the scrollable element called '#scrollable' for a maximum of 5 scrolls
    await elem.scrollIntoView({
        direction: 'left',
        maxScrolls: 5,
        scrollableElement: $('#scrollable')
    });
});
```