html - 如何让滚动条向下移动到我选择的父元素

Question

我在一个 div 中有一个表，它在一个 div 中。喜欢下面的片段:

*
{
  overflow: hidden;
}

.body
{
  height: 300px;
  width: 300px;
  border: 1px solid black;
}

.header
{
  height: 50px;
  width: 300px;
}

.page
{
  height: 198px;
  width: 298px;
  border: 1px solid green;
  overflow: auto;
}

.container
{
}

.table
{
  height: 96px;
  width: 396px;
  border: 1px solid blue;
}

<div class="body">
  <div class="header">
  </div>
  <div class="page">
    <div class="container">
      <div class="table">
      </div>
    </div>
  </div>
</div>

在这里，我希望 "page" 元素位于滚动条所在的位置，以便在需要滚动条时使用。这就是为什么所有内容都设置为 overflow: hidden; 除了 "page" 元素。现在这不适用于宽度溢出并被剪裁 - 请注意所有高度溢出都按预期工作并在正确的 "page" 元素上提供滚动条。

将 overflow: auto; 设置为 "container" 元素也是无用的，因为滚动条在该元素上而不是父 "page" 元素。

如何让子元素内的溢出向下移动到我选择的父元素，这样我总能在我想要的位置获得滚动条？

Answer 1

如果我正确理解你的问题，那么滚动不工作的原因是 overflow:hidden，该属性意味着元素宽度之外的所有内容都将被完全隐藏，因此它不能'滚动到。

解决方案是将 overflow:visible 设置为 page 元素以外的所有内容，这意味着溢出的所有内容仍然可见，但具有此属性的元素获胜'有自己的滚动条。

这是您编辑过的代码片段，我认为它达到了您想要的效果，希望对您有所帮助:

.body
{
  height: 300px;
  width: 300px;
  border: 1px solid black;
}

.header
{
  height: 50px;
  width: 300px;
}

.page
{
  height: 198px;
  width: 298px;
  border: 1px solid green;
  overflow: auto;
}

.container
{
}

.table
{
  height: 96px;
  width: 396px;
  border: 1px solid blue;
}

<div class="body">
  <div class="header">
  </div>
  <div class="page">
    <div class="container">
      <div class="table">
      </div>
    </div>
  </div>
</div>