如何检测子元素在overflow:hidden父容器中是否100%可见？

你需要检测轮播组件的首屏/末屏slide是否在父容器（宽度为视口80%）中完全可见，而非基于整个视口。可以通过同时获取子元素和父容器的getBoundingClientRect()，计算子元素相对于父容器的位置来实现：

核心思路 #

1. 获取子元素和父容器的视口定位信息
2. 计算子元素相对于父容器的偏移量（子元素rect减去父容器rect）
3. 判断子元素的所有边缘是否完全落在父容器的可视范围内（需配合父容器的overflow: hidden属性）

修改后的代码 #

JavaScript

function isFullyVisibleInParent(childEl, parentEl) {
    const childRect = childEl.getBoundingClientRect();
    const parentRect = parentEl.getBoundingClientRect();

    // 计算子元素相对于父容器的位置
    const relativeTop = childRect.top - parentRect.top;
    const relativeLeft = childRect.left - parentRect.left;
    const relativeBottom = childRect.bottom - parentRect.bottom;
    const relativeRight = childRect.right - parentRect.right;

    // 判断子元素是否完全被父容器包含
    return (
        relativeTop >= 0 &&
        relativeLeft >= 0 &&
        relativeBottom <= 0 &&
        relativeRight <= 0
    );
}

// 获取目标元素和父容器
const slide = document.querySelector('.firstSlide');
const carousel = document.querySelector('.carousel');
const message = document.querySelector('#inView');

document.addEventListener('click', function () {
    const messageText = isFullyVisibleInParent(slide, carousel) ?
        '完全在父容器可视范围内' :
        '未完全在父容器可视范围内';

    message.textContent = messageText;
}, { passive: true });

HTML（修正了父容器的样式拼写错误）

<div class="carousel" style="grid-template-columns: repeat(5, 585px); overflow:hidden; width:80%; margin:auto">
    <div class="image-container"><img src="image/url" alt=""></div>
    <div class="image-container"><img src="image/url" alt=""></div>
    <div class="image-container"><img src="image/url" alt=""></div>
    <div class="image-container"><img src="image/url" alt=""></div>
    <div class="image-container firstSlide"><img src="image/url" alt=""></div>
</div>
<p id="inView">完全在父容器可视范围内</p>

说明 #

• isFullyVisibleInParent函数通过相对位置判断子元素是否完全被父容器的可视区域覆盖
• 修正了原HTML中overfow的拼写错误，确保父容器的溢出隐藏规则生效
• 点击页面即可触发检测，实时更新提示文本

内容的提问来源于stack exchange，提问作者Anrich Vigus