对于我的应用程序，我正在使用react-router在页面之间创建转换。问题是：我想产生“窗口内的窗口”效果以使过渡正常工作，但是有一个问题。我可以用transform: translate3d(0, 0, 0);创建一个堆栈上下文。为了使固定元素停留在顶部而不与上下文滚动，我需要在内部放置另一个元素，该元素可以容纳溢出的内容。这是我尝试过的：
document.getElementById('content').innerHTML = 'content here '.repeat(500)html, body {
margin: 0;
height: 100vh;
width: 100vw;
}
.window {
background: palevioletred;
height: 100vh;
width: 100vw;
overflow: hidden;
/* I may use absolute position, don't think that
matters much though */
position: relative;
transform: translate3d(0,0,0);
}
.root {
height: 100%;
width: 100%;
position: relative;
overflow: auto;
}
header {
background: turquoise;
color: white;
height: 2rem;
position: fixed;
top: 0; left: 0; right: 0;
}<div class="window">
<div class="root">
<header>Some content here</header>
<main id="content"></main>
</div>
</div>我想要的是使.window元素在浏览器中的行为类似于window，即，当内容溢出时显示滚动条，并创建实际上固定的固定元素，同时将其保留在内部，以使它们不与滚动条和用户可以在将鼠标悬停在其上时滚动（这对我来说至关重要）。
[我基本上想要这样，但是在[DOM]树中比[div内部更深的地方使用body，并保持堆栈上下文：
document.getElementById('content').innerHTML = 'content here'.repeat(500)html, body { margin: 0 }
body {
width: 100vw;
min-height: 100vh;
background: palevioletred;
}
header {
background: turquoise;
position: fixed;
top: 0; left: 0; right: 0;
height: 2rem;
}<body>
<header>Header</header>
<main id="content"></main>
</body>此外，我也不想在外部重组任何东西，我基本上希望在窗口内部建立一个孤立的窗口。听起来有点复杂，但我不确定这是否可能，但我希望有人能够提供帮助
.window{overflow-y: auto;}