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.

Usage

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

Parameters

Name	Type	Details
options	object, boolean	options for Element.scrollIntoView(). Default for desktop/mobile web: { block: 'start', inline: 'nearest' } Default for Mobile Native App { maxScrolls: 10, scrollDirection: 'down' }
Desktop/Mobile Web Only
options.behavior optional	string	See MDN Reference. WEB-ONLY (Desktop/Mobile)
options.block optional	string	See MDN Reference. WEB-ONLY (Desktop/Mobile)
options.inline optional	string	See MDN Reference. WEB-ONLY (Desktop/Mobile)
Mobile Native App Only
options.direction optional	string	Can be one of down, up, left or right, default is up. MOBILE-NATIVE-APP-ONLY
options.maxScrolls optional	number	The max amount of scrolls until it will stop searching for the element, default is 10. MOBILE-NATIVE-APP-ONLY
options.duration optional	number	The duration in milliseconds for the swipe. Default is 1500 ms. The lower the value, the faster the swipe. MOBILE-NATIVE-APP-ONLY
options.scrollableElement 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. MOBILE-NATIVE-APP-ONLY
options.percent optional	number	The percentage of the (default) scrollable element to swipe. This is a value between 0 and 1. Default is 0.95. 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. MOBILE-NATIVE-APP-ONLY

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')
    });
});