非子元素能否受overflow:hidden控制？无法实现时存在哪些可行替代方案？

解决方案 #

你现有架构完全合理，不需要大改，有两种落地成本极低的方案可以实现需求：

方案1：CSS混合模式实现（零结构改动） #

只需要调整几个CSS属性即可，不需要修改现有DOM结构和JS逻辑：

1. 给头部、侧边栏设置z-index: 10，保证层级高于普通内容
2. 给expander修改两个属性：

#expander {
  /* 保留你原有所有配置 */
  z-index: 11;
  mix-blend-mode: difference;
}

利用混合模式的特性，黑色的expander和白色的头部/侧边栏重叠后，重叠区域会自动变为黑色，非重叠区域保持原白色，完全符合你的需求，不需要额外加任何元素。如果最终呈现的颜色不符合预期，替换difference为xor/exclusion调整即可，现代浏览器对这个属性的兼容性已经覆盖97%以上的用户群体。

方案2：裁剪式副本导航（兼容性最优） #

如果需要兼容极旧版本浏览器，可以用这个方案，完全不受expander的transform属性影响：

1. 复制一份Sidebar和Header组件，添加.inverted类名，样式设置为黑色，定位和原导航完全重合，添加pointer-events: none避免拦截原导航的交互事件，设置z-index: 12
2. 给副本导航加CSS属性：

.sidebar.inverted, .header.inverted {
  clip-path: circle(calc(var(--expand-rate) * 142vh) at center);
}

这里142vh是屏幕对角线的近似长度，刚好覆盖全屏。
3. 你原来动态修改expander缩放的JS代码同步加一行即可：

const expander = document.getElementById('expander')
expander.style.transform = 'scale(' + String(heightRatio) + ')'
// 新增同步设置缩放比例给副本导航
document.documentElement.style.setProperty('--expand-rate', heightRatio)

这个方案不会和expander产生任何嵌套关系，完全规避了transform对子元素的影响，适配逻辑和原导航完全一致。

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