scrollIntoView

Desplaza el elemento hacia la vista para navegadores web de escritorio/móvil Y aplicaciones nativas móviles.

información

El desplazamiento para aplicaciones nativas móviles se basa en el comando móvil swipe.

Uso

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

Parámetros

Nombre	Tipo	Detalles
options opcional	object, boolean	opciones para Element.scrollIntoView(). Predeterminado para web escritorio/móvil: { block: 'start', inline: 'nearest' } Predeterminado para aplicaciones nativas móviles { maxScrolls: 10, scrollDirection: 'down' }
Solo para Web Escritorio/Móvil
options.behavior opcional	string	Ver Referencia MDN. SOLO-WEB (Escritorio/Móvil)
options.block opcional	string	Ver Referencia MDN. SOLO-WEB (Escritorio/Móvil)
options.inline opcional	string	Ver Referencia MDN. SOLO-WEB (Escritorio/Móvil)
Solo para Aplicaciones Nativas Móviles
options.direction opcional	string	Puede ser uno de down, up, left o right, el valor predeterminado es up. SOLO-APLICACIÓN-NATIVA-MÓVIL
options.maxScrolls opcional	number	La cantidad máxima de desplazamientos hasta que deje de buscar el elemento, el valor predeterminado es 10. SOLO-APLICACIÓN-NATIVA-MÓVIL
options.duration opcional	number	La duración en milisegundos para el deslizamiento. El valor predeterminado es 1500 ms. Cuanto menor sea el valor, más rápido será el deslizamiento. SOLO-APLICACIÓN-NATIVA-MÓVIL
options.scrollableElement opcional	Element	Elemento que se utiliza para desplazarse. Si no se proporciona ningún elemento, utilizará el siguiente selector para iOS -ios predicate string:type == "XCUIElementTypeApplication" y el siguiente para Android //android.widget.ScrollView'. Si más elementos coinciden con el selector predeterminado, por defecto elegirá el primer elemento coincidente. SOLO-APLICACIÓN-NATIVA-MÓVIL
options.percent opcional	number	El porcentaje del elemento desplazable (predeterminado) para deslizar. Este es un valor entre 0 y 1. El valor predeterminado es 0.95. NUNCA deslice desde la parte superior|inferior|izquierda|derecha exacta de la pantalla, podría activar por ejemplo la barra de notificaciones u otras características del SO/App que pueden conducir a resultados inesperados. SOLO-APLICACIÓN-NATIVA-MÓVIL

Ejemplos

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