CSS:防止固定元素重叠滚动条
CSS:防止固定元素重叠滚动条
提问于 2019-11-24 09:55:17
对于我的应用程序，我使用react路由器来创建页面之间的转换。问题是:我想发挥“窗口内”的作用，使过渡工作，但有一个问题。我能够用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>
另外，我也不想重构任何外部的东西，我基本上希望在窗口内有一个孤立的窗口。听起来有点复杂，我不确定这是否可能。
Stack Overflow用户
发布于 2019-11-24 12:21:34
.window{overflow-y: auto;}- overflow-y:auto；和overflow x: auto；可以修复此类问题。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/59016465
复制相关文章
相似问题
腾讯云开发者
