如何使子列在滚动时跟随父行

Posted 2023-05-08

【中文标题】如何使子列在滚动时跟随父行

【英文标题】：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)