scrollIntoView

デスクトップ/モバイルWebページおよびモバイルネイティブアプリのために要素をビューポートにスクロールします。

情報

モバイルネイティブアプリでのスクロールはモバイルのswipeコマンドに基づいて行われます。

使用方法

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

パラメータ

名前	型	詳細
options オプション	object, boolean	Element.scrollIntoView()のオプション。デスクトップ/モバイルWebのデフォルト: { block: 'start', inline: 'nearest' } モバイルネイティブアプリのデフォルト { maxScrolls: 10, scrollDirection: 'down' }
デスクトップ/モバイルWebのみ
options.behavior オプション	string	MDNリファレンスを参照してください。 WEBのみ (デスクトップ/モバイル)
options.block オプション	string	MDNリファレンスを参照してください。 WEBのみ (デスクトップ/モバイル)
options.inline オプション	string	MDNリファレンスを参照してください。 WEBのみ (デスクトップ/モバイル)
モバイルネイティブアプリのみ
options.direction オプション	string	down、up、leftまたはrightのいずれか、デフォルトはupです。 モバイルネイティブアプリのみ
options.maxScrolls オプション	number	要素を検索するまでの最大スクロール回数、デフォルトは10です。 モバイルネイティブアプリのみ
options.duration オプション	number	スワイプのミリ秒単位の所要時間。デフォルトは1500ミリ秒です。値が低いほど、スワイプが速くなります。 モバイルネイティブアプリのみ
options.scrollableElement オプション	Element	内部でスクロールするために使用される要素。要素が提供されない場合、iOSでは -ios predicate string:type == "XCUIElementTypeApplication"、Androidでは //android.widget.ScrollView' というセレクターを使用します。デフォルトのセレクターに複数の要素が一致する場合、デフォルトでは最初に一致する要素が選択されます。 モバイルネイティブアプリのみ
options.percent オプション	number	スワイプする（デフォルトの）スクロール可能要素の割合。これは0から1の間の値です。デフォルトは0.95です。 決して画面の正確な上部|下部|左|右からスワイプしないでください。通知バーなどのOS/アプリ機能がトリガーされ、予期しない結果につながることがあります。 モバイルネイティブアプリのみ

例

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