如何使子列在滚动时跟随父行
Posted
技术标签:
【中文标题】如何使子列在滚动时跟随父行【英文标题】：How to make child column follow parent row on scroll 【发布时间】：2021-11-09 17:27:08 【问题描述】：我正在使用来自 bootstrap-table 插件的表格，该表格填充了自定义 API 的数据。根据返回的数据，该表可能会变得很长。我有几个列表组位于表格旁边，这些列表组将根据用户与表格的交互来保存表格中的某些信息。如果填充表格的数据导致用户必须向下滚动才能查看其余数据，我希望列表组跟随滚动。
这是 html。如果用户必须向下滚动，我希望具有“followScroll”类的列跟随表格。它全部嵌套在一行中，列表组嵌套在第一个列表组列中，以便它们可以堆叠在一起。我尝试使用位置：固定在“followScroll”类上，但这只会使列表组消失。非常感谢任何有关如何实现这一目标的建议！
<div class="row tableData mb-3">
<div class="col-md-8">
<table id="table2" class="table table-bordered border-secondary">
<thead>
<tr>
<th data-field="state" data-checkbox="true">Copy</th>
<th data-field="date">Date</th>
<th data-field="temperature">Temperature</th>
<th data-field="hdd">HDD</th>
<th data-field="meterReading">Meter Reading</th>
<th data-field="expected">Expected</th>
<th data-field="replacement">Replacement</th>
<th data-field="reason">Reason</th>
<th data-field="notes">Notes</th>
</thead>
</table>
</div>
<div class="col-md-4 followScroll">
<ol class="list-group list-group-numbered">
<li class="list-group-item d-flex justify-content-between align-items-start">
<div class="ms-2 me-auto">
<div class="fw-bold">Subheading</div>
Cras justo odio
</div>
<span class="badge bg-primary rounded-pill">14</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-start">
<div class="ms-2 me-auto">
<div class="fw-bold">Subheading</div>
Cras justo odio
</div>
<span class="badge bg-primary rounded-pill">14</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-start">
<div class="ms-2 me-auto">
<div class="fw-bold">Subheading</div>
Cras justo odio
</div>
<span class="badge bg-primary rounded-pill">14</span>
</li>
</ol>
<div class="row mt-3">
<div class="col-md-12">
<ol class="list-group list-group-numbered">
<li class="list-group-item d-flex justify-content-between align-items-start">
<div class="ms-2 me-auto">
<div class="fw-bold">Subheading</div>
Cras justo odio
</div>
<span class="badge bg-primary rounded-pill">14</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-start">
<div class="ms-2 me-auto">
<div class="fw-bold">Subheading</div>
Cras justo odio
</div>
<span class="badge bg-primary rounded-pill">14</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-start">
<div class="ms-2 me-auto">
<div class="fw-bold">Subheading</div>
Cras justo odio
</div>
<span class="badge bg-primary rounded-pill">14</span>
</li>
</ol>
</div>
<div class="col-md-12 mt-3">
<ol class="list-group list-group-numbered">
<li class="list-group-item d-flex justify-content-between align-items-start">
<div class="ms-2 me-auto">
<div class="fw-bold">Subheading</div>
Cras justo odio
</div>
<span class="badge bg-primary rounded-pill">14</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-start">
<div class="ms-2 me-auto">
<div class="fw-bold">Subheading</div>
Cras justo odio
</div>
<span class="badge bg-primary rounded-pill">14</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-start">
<div class="ms-2 me-auto">
<div class="fw-bold">Subheading</div>
Cras justo odio
</div>
<span class="badge bg-primary rounded-pill">14</span>
</li>
</ol>
</div>
</div>
</div>
</div>
【问题讨论】：
您是否尝试将“粘性”属性添加到您的子元素？ 我做到了。该列只是停留在其位置，不跟随滚动。 【参考方案1】：您可以在 CSS 文件中添加溢出属性。 css：
.followScroll
overflow-y: scroll;
overflow-x:scroll;
取决于您是要向右/向左滚动 (overflow-x:scroll;) 还是向上/向下滚动 (overflow-y:scroll)
【讨论】：
以上是关于如何使子列在滚动时跟随父行的主要内容，如果未能解决你的问题，请参考以下文章