How to find all elements within some container, that are visible to the user?(如何在某个容器中找到用户可见的所有元素？)
Maybe there is some kind of aquerySelector exists that searches only in a visible area?(也许存在某种只在可见区域搜索的querySelector ？)
Also, it will be fine if black_magic would return an element closest to the horizontal screen center.(另外，如果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>
ask by undefined translate from so
