Question

我正在尝试实施“粘性”＃39;在网页面板底部打开的效果栏。栏应该弹出在外壳面板的底部，并且只要内容滚动就应该留在那里。

相关面板必须position: absolute以适应其余页面布局，并将overflow设置为auto，以允许其内容展开而不会影响主页面。然后，此面板包含使用不同模板填充的站点的另一个子部分。

每个模板都不知道任何关于它的容器，反之亦然，它们是断开连接的实体。

我试图实现的模板应该有一个弹出的栏，它固定在主面板的底部，它不应该与其他内容一起滚动。我已将其设置为position: absolute以及bottom: 0，我希望这是解决方案。当容器中没有溢出时，这呈现正常，但是当存在溢出时，条形将在容器的底部呈现，直到容器被滚动，在这种情况下;它会向上移动，看起来像是浮动的。

以下代码段显示了当前实施失败的减少版本。

＆＃13;

.container {
  height: 300px;
  width: 300px;
  background: red;
  overflow: auto;
  position: absolute;
  top: 0;
  left: 0;
}
.non-template {
  background: lightgreen;
}
.bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: lightblue;
}

＆＃13;

<div class="container">
  <div class="non-template">
    This div contains other content that should scroll along with any extra content in the template below
  </div>

  <!-- This div is a generated through a template. The markup here must be rendered inside this div, it cannot be moved outside of it. -->
  <div class="template">
    <p style="height: 500px;">Main template stuf</p>
    <div class="bar">i should not scroll</div>
  </div>
</div>

＆＃13;

我已经通过将条形移动到模板块之外并将overflow设置移动到模板块来管理黑客以获得我需要的确切内容但当然，这对我来说不是解决方案因为模板首先为栏生成HTML。

以下代码段显示了这一点。

＆＃13;

.container {
  height: 300px;
  width: 300px;
  background: red;
  position: absolute;
  top: 0;
  left: 0;
}
.scrollable {
  overflow: auto;
  width: 100%;
  height: 100%;
}
.non-template {
  background: lightgreen;
}
.bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: lightblue;
}

＆＃13;

<!-- The container no longer has any overflow -->
<div class="container">
  <!-- The bar has been moved to here -->
  <div class="bar">i should not scroll</div>

  <!-- Another wrapper has been introduced which has the overflow set to auto -->
  <div class="scrollable">
    <div class="non-template">This div contains other content that should scroll along with any extra content in the template below</div>


    <div class="template">
      <p style="height: 500px;">Main template stuf</p>
    </div>
  </div>
</div>

＆＃13;

我的问题是如何在不移动模板化HTML的当前位置的情况下阻止栏滚动？这有可能吗？

防止滚动到绝对定位的div

0 个答案: