isDisplayedInViewport

指定されたセレクターで見つかった選択されたDOM要素が部分的に表示され、ビューポート内にある場合にtrueを返します。

使用法

$(selector).isDisplayedInViewport()

例

index.html

<div id="noSize"></div>
<div id="noSizeWithContent">Hello World!</div>
<div id="notDisplayed" style="width: 10px; height: 10px; display: none"></div>
<div id="notVisible" style="width: 10px; height: 10px; visibility: hidden"></div>
<div id="zeroOpacity" style="width: 10px; height: 10px; opacity: 0"></div>
<div id="notInViewport" style="width: 10px; height: 10px; position:fixed; top: 999999; left: 999999"></div>

isDisplayed.js

it('should detect if an element is displayed', async () => {
    elem = await $('#notExisting');
    isDisplayedInViewport = await elem.isDisplayedInViewport();
    console.log(isDisplayedInViewport); // outputs: false

    let elem = await $('#noSize');
    let isDisplayedInViewport = await elem.isDisplayedInViewport();
    console.log(isDisplayedInViewport); // outputs: false

    let elem = await $('#noSizeWithContent');
    let isDisplayedInViewport = await elem.isDisplayedInViewport();
    console.log(isDisplayedInViewport); // outputs: true

    let elem = await $('#notDisplayed');
    let isDisplayedInViewport = await elem.isDisplayedInViewport();
    console.log(isDisplayedInViewport); // outputs: false

    elem = await $('#notVisible');
    isDisplayedInViewport = await elem.isDisplayedInViewport();
    console.log(isDisplayedInViewport); // outputs: false

    elem = await $('#zeroOpacity');
    isDisplayedInViewport = await elem.isDisplayedInViewport();
    console.log(isDisplayedInViewport); // outputs: false

    elem = await $('#notInViewport');
    isDisplayedInViewport = await elem.isDisplayedInViewport();
    console.log(isDisplayedInViewport); // outputs: false
});