如何隐藏父容器overflow:hidden下被裁切的子元素

尽管围绕该主题已有诸多类似提问，但尚无恰当的解决方案。当前父div应用了overflow:hidden属性，希望仅显示该容器内100%可见的子元素，需隐藏被裁切的第3个item（场景示意：容器内item1、item2完全显示，item3被部分裁切，需完全隐藏）。

原代码 #

CSS #

.wrapper {
    border: 1px solid black;
    display: block;
    overflow-x: hidden;
    white-space: nowrap;
    width: 200px;
}

.item {
    border: 1px solid red;
    box-sizing: border-box;
    display: inline-block;
    *display:inline; /* for IE7*/
    *zoom:1;/* for IE7*/
    width: 40%;
}

#i1{ height: 32px; }
#i2{ height: 64px; }
#i3{ height: 48px; }

HTML #

<div class="wrapper">
    <div id="i1" class="item">
      item 1
    </div>
    <div id="i2" class="item">
      item 2
    </div>
    <div id="i3" class="item">
      item 3
    </div>
</div>

解决方案 #

纯CSS无法直接实现“仅显示完全可见元素”的逻辑，需借助JavaScript检测元素的可视状态：

const wrapper = document.querySelector('.wrapper');
const items = document.querySelectorAll('.item');

function toggleItemVisibility() {
    const containerRect = wrapper.getBoundingClientRect();
    items.forEach(item => {
        const itemRect = item.getBoundingClientRect();
        // 判定元素是否完全在容器可视范围内
        const isFullyVisible = itemRect.left >= containerRect.left && 
                               itemRect.right <= containerRect.right;
        item.style.display = isFullyVisible ? 'inline-block' : 'none';
    });
}

// 初始化执行
toggleItemVisibility();

// 监听窗口缩放，适配容器尺寸变化
window.addEventListener('resize', toggleItemVisibility);

逻辑说明 #

• 使用getBoundingClientRect()获取容器和子元素的位置、尺寸信息
• 通过对比元素与容器的左右边界，判断元素是否完全可见
• 若容器尺寸可能动态调整（如窗口缩放），添加resize事件监听可实时更新元素显示状态

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