Question

对于我的应用程序，我正在使用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，即，当内容溢出时显示滚动条，并创建固定的固定元素，同时将其保留在里面，以使它们不会t与滚动条重叠，并且用户可以在将鼠标悬停在滚动条上时滚动（这对我来说至关重要）。

基本上我想要类似的东西，但是在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>

我也不想在外部重构任何东西，我基本上想要在窗口内部建立一个孤立的窗口。听起来有点复杂，我不确定是否有可能。

Answer 1

.window{overflow-y: auto;}

overflow-y：auto;和溢出-x：自动;可以解决此问题。

CSS：防止固定元素重叠滚动条

1 个答案: