javascript - 在父 div 中滚动子 div

Question

一些背景

我正在使用 Gridster网页的小部件。这些小部件显示在 HTML 表格下方。该表格有助于识别每个小部件的一些信息。小部件是 html <li>放置在 <ul> 中的元素.

小部件是从 json 动态生成的。(因此它们的数量不固定)

我想要的输出

由于小部件是动态生成的，因此小部件可能太多。发生这种情况时，网页变得太大，用户看不到 HTML 表格。

所以我想要的是小部件所在的部分应该滚动，HTML 表格固定在它的位置

因此，即使用户想要查看底部的小部件，他也可以看到带有它的 HTML 表格

到目前为止我尝试了什么

我做了一个<div>到小部件所在的部分并赋予属性 overflow:scroll对他们来说。但即便如此，它也没有按照我期望的方式工作

我的 HTML

<div class="content-wrapper">
    <div class="row">
      <div class="col-md-12 grid-margin stretch-card">
        <div class="card">
          <div class="card-body">
            <h4 class="card-title">My Webpage</h4>
           <p class="card-description" style="color:black;">
                      Zone for Gasoline:A, Year :2018
            </p>
            <div class="row">
             <div class="col-md-12">
              <div class="btn-group btn-block mb-4" aria-label="steps">
                     <div class="col md-4">
                        <a href="/app/step-1/"> <button type="button" class="btn btn-block btn-outline-secondary"> Step 1 </button> </a>
                         </div>
                <div class="col md-4">
                        <a href="/app/step-2/"> <button type="button"  class="btn btn-block btn-outline-secondary" > Step 2  </button> </a>
                      </div>
                 <div class="col md-4">
                        <a href="/app/step-3/"> <button type="button" class="btn btn-block btn-primary"> Step 3 </button></a>
                </div>
               </div>
              </div>
            </div>


  <table border = "1" class=".table-responsive">
     <tr>
        <th colspan="4"  style="background-color:#eedd82;">Zone 1</th>
        <th colspan="4"  style="background-color:#eedd82;">Zone 2</th>
        <th colspan="4"  style="background-color:#eedd82;">>Zone 3</th>
     </tr>
     <tr>
        <td width="400" align="center" style="background-color:#0085ca">T1</td>
        <td width="400" align="center" style="background-color:#0085ca">T2</td>
        <td width="400" align="center" style="background-color:#0085ca">T3</td>
        <td width="400" align="center" style="background-color:#0085ca">T4</td>
        <td width="400" align="center" style="background-color:#0085ca">T1</td>
        <td width="400" align="center" style="background-color:#0085ca">T2</td>
        <td width="400" align="center" style="background-color:#0085ca">T3</td>
        <td width="400" align="center" style="background-color:#0085ca">T4</td>
        <td width="400" align="center" style="background-color:#0085ca">T1</td>
        <td width="400" align="center" style="background-color:#0085ca">T2</td>
        <td width="400" align="center" style="background-color:#0085ca">T3</td>
        <td width="400" align="center" style="background-color:#0085ca">T4</td>
     </tr>
 </table>

 <!--Gridster widgets will appear here below table-->
 <div class="gridster father">
      <ul class="child">

      </ul>
</div>

我很抱歉这么大的 HTML 代码。在 HTML 中你可以看到下面的 <table>我上过课father到 <div>和 child至 <ul>元素。

对于他们两个，我尝试了以下 CSS(单独和组合方式)

.father{
    overflow:scroll;
  }

.child{
    overflow:scroll;
  }

但我没有给出我想要的“滚动”效果

Fiddle代表相同

任何帮助将不胜感激

Answer 1

假设您希望应用滚动以在较小的显示器(例如手机)上启用响应行为，应该将溢出滚动应用到表的父级以启用像这样的滚动

HTML:

<div class="parent">
    <ul class="child">
        ...
    </ul>
</div>

CSS:

.parent {
    overflow: scroll;
}

为了更好的响应体验，我们可能只希望滚动从左到右(y 轴)而不是从上到下(x 轴)，我们也需要设置它，因此需要相应地调整我们的 CSS .

.parent {
    overflow-y: scroll;
}

在您的示例中，父类和子类似乎作为无序列表 ( <ul> ) 应用于网格构建，其中包含小汽车图标。这 <ul>正在定义父级的高度和宽度，因此在足够大的窗口中，表格不会滚动。但是，如果压缩窗口，则父元素只会扩展到窗口的宽度，这是 div 的预期行为。此时子元素会滚动。

如果您希望对 .table-responsive 应用同样的行为元素你需要应用相同的原则。将表包装在父表中并相应地应用溢出。你不想把 overflow-scroll在表格本身上，但您可能希望为表格指定最小宽度或应用固定宽度，例如 width: 300px;

HTML:

<div class="parent">
    <table class="table-responsive">
        ...
    </table>
</div>

CSS:

.parent {
    overflow-y: scroll;
}
.table-responsive {
    your styles
}

如果您需要修复父元素的尺寸，以便该元素不定义窗口的大小，您可以使用 CSS 做类似的事情

.parent {
    overflow: scroll;
    width: 400px;
    max-width: 100vw;
    height: 400px;
    max-height: 100vh;
}
.table-responsive {
    your styles
}

在这种情况下，您的宽度最好是 400 像素宽，但绝不会超过视口(viewport)宽度，绝不会超过 400 像素高，但绝不会超过视口(viewport)高度。如果你想让你的高度变得更聪明，你可以使用 calc为您设置最大高度，以便考虑到页面上的其他元素，该窗口永远不会超过特定高度。