scrollIntoView

Element in Viewport scrollen für Desktop/Mobile Web UND Mobile Native Apps.

Info

Das Scrollen für Mobile Native Apps basiert auf dem mobilen swipe-Befehl.

Verwendung

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

Parameter

Name	Typ	Details
options optional	object, boolean	Optionen für Element.scrollIntoView(). Standard für Desktop/Mobile Web: { block: 'start', inline: 'nearest' } Standard für Mobile Native App { maxScrolls: 10, scrollDirection: 'down' }
Nur Desktop/Mobile Web
options.behavior optional	string	Siehe MDN Referenz. NUR-WEB (Desktop/Mobile)
options.block optional	string	Siehe MDN Referenz. NUR-WEB (Desktop/Mobile)
options.inline optional	string	Siehe MDN Referenz. NUR-WEB (Desktop/Mobile)
Nur Mobile Native App
options.direction optional	string	Kann einer der Werte down, up, left oder right sein, Standard ist up. NUR-MOBILE-NATIVE-APP
options.maxScrolls optional	number	Die maximale Anzahl von Scrolls, bis die Suche nach dem Element beendet wird, Standard ist 10. NUR-MOBILE-NATIVE-APP
options.duration optional	number	Die Dauer des Wischens in Millisekunden. Standard ist 1500 ms. Je niedriger der Wert, desto schneller der Wisch. NUR-MOBILE-NATIVE-APP
options.scrollableElement optional	Element	Element, in dem gescrollt wird. Wenn kein Element angegeben wird, wird für iOS der Selektor -ios predicate string:type == "XCUIElementTypeApplication" und für Android //android.widget.ScrollView' verwendet. Wenn mehrere Elemente dem Standardselektor entsprechen, wird standardmäßig das erste übereinstimmende Element ausgewählt. NUR-MOBILE-NATIVE-APP
options.percent optional	number	Der Prozentsatz des (Standard-)scrollbaren Elements, der gewischt werden soll. Dies ist ein Wert zwischen 0 und 1. Standard ist 0.95. NIEMALS vom genauen oberen|unteren|linken|rechten Bildschirmrand wischen, da dies beispielsweise die Benachrichtigungsleiste oder andere Betriebssystem-/App-Funktionen auslösen kann, was zu unerwarteten Ergebnissen führen kann. NUR-MOBILE-NATIVE-APP

Beispiele

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