查找容器中的所有可见元素答案

【问题标题】：Find All Visible Elements in a Container查找容器中的所有可见元素
【发布时间】：2020-03-25 15:30:35
【问题描述】：

如何在某个容器中找到用户可见的所有元素？

也许存在某种querySelector 只在可见区域搜索？

另外，如果black_magic 会返回一个最接近水平屏幕中心的元素，那就没问题了。

function black_magic( ) {
    /* your code goes here */
};

button.onclick = function( ) {
    const visible_elements = black_magic();
    console.log( visible_elements );
};

:root {
    background: linear-gradient( #e66465, #9198e5 );
}

button {
    position: fixed;
    top: 0.5rem;
}

#container {
    display: flex;
    flex-direction: column;
}

#container > section {
    background: linear-gradient( #9198e5,  #e66465 );
    padding: 0.5rem;
    text-align: center;
    color: white;
    font-size: xx-large;
    margin: 1rem 0 1rem 0;
}

<html>
<head></head>
<body>
    <button id=button>Check for Visible Elements in #container</button>
    <section id=container>
        <section>Hello, World! #01</section>
        <section>Hello, World! #02</section>
        <section>Hello, World! #03</section>
        <section>Hello, World! #04</section>
        <section>Hello, World! #05</section>
        <section>Hello, World! #06</section>
        <section>Hello, World! #07</section>
        <section>Hello, World! #08</section>
        <section>Hello, World! #09</section>
        <section>Hello, World! #10</section>
        <section>Hello, World! #11</section>
        <section>Hello, World! #12</section>
        <section>Hello, World! #13</section>
        <section>Hello, World! #14</section>
        <section>Hello, World! #15</section>
        <section>Hello, World! #16</section>
    </section>
</body>
</html>

【问题讨论】：

标签： javascript dom

【解决方案1】：

这可以解决问题。

function black_magic( ) {
    const allElements = document.querySelectorAll('#container *');
    let elements = [];
    allElements.forEach(function(node){
      let clientRect = node.getBoundingClientRect();
      if (!(window.innerHeight <= clientRect.top || (clientRect.top <= 0 && clientRect.bottom <= 0)) ) {
        elements.push(node);
      }
    });
    return elements;
};

button.onclick = function( ) {
    const visible_elements = black_magic();
    console.log( visible_elements );
};

:root {
    height: 2000px;
    background: linear-gradient( #e66465, #9198e5 );
}

button {
    position: fixed;
    top: 0.5rem;
}

#test_element {
    background: linear-gradient( #9198e5,  #e66465 );
    padding: 0.5rem;
    text-align: center;
    color: white;
    font-size: xx-large;
    margin-top: 1000px;
}

<html>
<head></head>
<body>
    <button id=button>Check for Visible Elements in #container</button>
    <section id=container>
        <section id=test_element>
            Hello, World!
        </section>
    </section>
</body>
</html>

见： https://stackoverflow.com/a/18794913/6458608，https://stackoverflow.com/a/3333352/6458608：

【讨论】：