javascript - 是否有可能使非子元素受到溢出隐藏的影响？如果没有，有什么解决方法？

Question

我正在尝试创建一个带有白色侧边栏和标题的叠加层，当扩展器开始填充屏幕时，它们开始将颜色变为黑色。扩展器从中心填充屏幕，因此标题和侧边栏的部分应为黑色，而扩展器未覆盖的部分应为白色。

到目前为止，我已经尝试在扩展器 div 内定位具有所需属性的重复标题/侧边栏，但缩放和定位最终成为一场噩梦，因为我使用 JS 在扩展器上应用变换属性，导致嵌套元素扩展也是。

我想出的当前最佳方法是以某种方式使用溢出隐藏并将侧边栏和标题放置在扩展器之外，但我现在遇到了溢出不影响重复侧边栏/标题的问题，因为它们不是孩子的扩展器。

有没有办法解决这个问题，还是我的架构不好？

编辑：添加了一些代码

Expander 位于一个名为 scroll2 的容器内。Scroll2 只是网站的第二个滚动组件。

<div id="scroll2">
            <div id="scroll2Box" />
            <div id="expander" />
            <div id="scroll2BoxImages" />
</div>

扩展器 CSS

#expander {
  position: fixed;
  top: 0;
  height: 100vh;
  width: 100vw;
  background: black;
  right: 0;
  z-index: 1;
  transform: scale(0);
  overflow: hidden;
}

Expander 的变换样式会根据用户的滚动位置而改变。

document.getElementById('expander').style.transform = 'scale(' + String(heightRatio) + ')'

我的标题和侧边栏组件完全在滚动之外，并放置在我的路由器逻辑区域中。

<Router>
    <Sidebar yPosition={y} direction={direction}/>
    <Header yPosition={y}/>
    <div id="mainContent">
        <Switch>
            <Route exact path="/" component={HomePage} />
            <Route path="/about" component={AboutPage} />
            <Route path="/contact" component={ContactPage} />
            <Route path="/products" component={ProductsPage} />
       </Switch>
    </div>
    {/* <Footer /> not complete yet */}
</Router>

标签： javascripthtmlcss