滚动两列直到到达最后一个元素答案

【问题标题】：Scroll two colums until last element is reached滚动两列直到到达最后一个元素
【发布时间】：2021-05-19 10:05:21
【问题描述】：

我想创建一个类似于LinkedIn 的提要页面。我想要的行为是 two cols 并排第一个 col 有很多元素，而第二个 cols 有更少的元素。当用户滚动时，两个列都会滚动。但是一旦到达最底部的元素，它就会被缝合以查看。现在进一步滚动，只有第一个 col 元素被滚动。当我们向上滚动时，第二列也会向上滚动。
我正在使用角度和打字稿来制作这个。
下面附上几张参考图片。

编辑：
我正在尝试使用引导行和列来做到这一点

<div class="row">
    <div class="col-8">
        ...
    </div>
    <div class="col-4" style="position:fixed;">
        ...
    </div>
</div>

【问题讨论】：

到目前为止你尝试了什么？我们可以帮助您的实际行为是什么？
@Random 我尝试将第二列上的内容位置固定。这使它们粘在视图上，但不能滚动。
您能否展示您的相关 HTML/CSS 代码，以便我们了解如何更改它以使其正常工作？
@Random 我也添加了代码。

标签： html css angular typescript bootstrap-4

【解决方案1】：

在第二列使用position: sticky; bottom: 0。快速示例：

.col2 { position: sticky; bottom: 0; margin-left: 50px; }

<div class="container">
  <div class="col1">
    <p>col 1</p>
    <p>col 1</p>
    <p>col 1</p>
    <p>col 1</p>
    <p>col 1</p>
    <p>col 1</p>
    <p>col 1</p>
    <p>col 1</p>
    <p>col 1</p>
    <p>col 1</p>
    <p>col 1</p>
    <p>col 1</p>
    <p>col 1</p>
    <p>col 1</p>
    <p>col 1</p>
    <p>col 1</p>
    <p>col 1</p>
    <p>col 1</p>
    <p>col 1</p>
    <p>col 1</p>
    <p>col 1</p>
    <p>col 1</p>
    <p>col 1</p>
    <p>col 1</p>
    <p>col 1</p>
    <p>col 1</p>
    <p>col 1</p>
    <p>col 1</p>
    <p>col 1</p>
    <p>col 1</p>
    <p>col 1</p>
    <p>col 1</p>
    <p>col 1</p>
    <p>col 1</p>
    <p>col 1</p>
    <p>col 1</p>
    <p>col 1</p>
    <p>col 1</p>
    <p>col 1</p>
    <p>col 1</p>
    <p>col 1</p>
    <p>col 1</p>
    <p>col 1</p>
    <p>col 1</p>
    <p>col 1</p>
    <p>col 1</p>
    <p>col 1</p>
    <p>col 1</p>
    <p>col 1</p>
    <p>col 1</p>
    <p>col 1</p>
    <p>col 1</p>
    <p>col 1</p>
    <p>col 1</p>
    <p>col 1</p>
    <p>col 1</p>
    <p>col 1</p>
    <p>col 1</p>
    <p>col 1</p>
    <p>col 1</p>
    <p>col 1</p>
    <p>col 1</p>
    <p>col 1</p>
    <p>col 1</p>
    <p>col 1</p>
    <p>col 1</p>
    <p>col 1</p>
    <p>col 1</p>
    <p>col 1</p>
    <p>col 1</p>
    <p>col 1</p>
    <p>col 1</p>
    <p>col 1</p>
    <p>col 1</p>
    <p>col 1</p>
    <p>col 1</p>
    <p>col 1</p>
    <p>col 1</p>
    <p>col 1</p>
    <p>col 1</p>
    <p>col 1</p>
    <p>col 1</p>
    <p>col 1</p>
    <p>col 1</p>
    <p>col 1</p>
    <p>col 1</p>
    <p>col 1</p>
    <p>col 1</p>
    <p>col 1</p>
    <p>col 1</p>
    <p>col 1</p>
    <p>col 1</p>
    <p>col 1</p>
    <p>col 1</p>
    <p>col 1</p>
    <p>col 1</p>
    <p>col 1</p>
    <p>col 1</p>
    <p>col 1</p>
    <p>col 1</p>
    <p>col 1</p>
    <p>col 1</p>
    <p>col 1</p>
    <p>col 1</p>
    <p>col 1</p>
    <p>col 1</p>
    <p>col 1</p>
    <p>col 1</p>
    <p>col 1</p>
    <p>col 1</p>
    <p>col 1</p>
    <p>col 1</p>
    <p>col 1</p>
    <p>col 1</p>
    <p>col 1</p>
    <p>col 1</p>
    <p>col 1</p>
    <p>col 1</p>
    <p>col 1</p>
    <p>col 1</p>
    <p>col 1</p>
    <p>col 1</p>
    <p>col 1</p>
    <p>col 1</p>
    <p>col 1</p>
    <p>col 1</p>
    <p>col 1</p>
    <p>col 1</p>
    <p>col 1</p>
    <p>col 1</p>
    <p>col 1</p>
    <p>col 1</p>
    <p>col 1</p>
    <p>col 1</p>
    <p>col 1</p>
    <p>col 1</p>
    <p>col 1</p>
    <p>col 1</p>
    <p>col 1</p>
    <p>col 1</p>
    <p>col 1</p>
    <p>col 1</p>
    <p>col 1</p>
    <p>col 1</p>
    <p>col 1</p>
    <p>col 1</p>
    <p>col 1</p>
    <p>col 1</p>
    <p>col 1</p>
    <p>col 1</p>
    <p>col 1</p>
    <p>col 1</p>
    <p>col 1</p>
    <p>col 1</p>
    <p>col 1</p>
    <p>col 1</p>
    <p>col 1</p>
    <p>col 1</p>
    <p>col 1</p>
    <p>col 1</p>
    <p>col 1</p>
    <p>col 1</p>
    <p>col 1</p>
    <p>col 1</p>
    <p>col 1</p>
    <p>col 1</p>
    <p>col 1</p>
    <p>col 1</p>
    <p>col 1</p>
    <p>col 1</p>
    <p>col 1</p>
    <p>col 1</p>
    <p>col 1</p>
    <p>col 1</p>
    <p>col 1</p>
    <p>col 1</p>
    <p>col 1</p>
    <p>col 1</p>
    <p>col 1</p>
    <p>col 1</p>
    <p>col 1</p>
    <p>col 1</p>
    <p>col 1</p>
    <p>col 1</p>
    <p>col 1</p>
    <p>col 1</p>
    <p>col 1</p>
    <p>col 1</p>
    <p>col 1</p>
    <p>col 1</p>
  </div>
  <div class="col2">
    <p>col 2</p>
    <p>col 2</p>
    <p>col 2</p>
    <p>col 2</p>
    <p>col 2</p>
    <p>col 2</p>
    <p>col 2</p>
    <p>col 2</p>
    <p>col 2</p>
    <p>col 2</p>
    <p>col 2</p>
    <p>col 2</p>
    <p>col 2</p>
    <p>col 2</p>
    <p>col 2</p>
    <p>col 2</p>
    <p>col 2</p>
    <p>col 2</p>
    <p>col 2</p>
    <p>col 2</p>
    <p>col 2</p>
    <p>col 2</p>
    <p>col 2</p>
    <p>col 2</p>
    <p>col 2</p>
    <p>col 2</p>
    <p>col 2</p>
    <p>col 2</p>
    <p>col 2</p>
    <p>col 2</p>
    <p>col 2</p>
    <p>col 2</p>
    <p>col 2</p>
    <p>col 2</p>
    <p>col 2</p>
    <p>col 2</p>
    <p>col 2</p>
    <p>col 2</p>
    <p>col 2</p>
    <p>col 2</p>
  </div>
</div>

【讨论】：

嘿，这确实有效。但是如何使用引导行和列来做到这一点。谢谢！
如果我不包括 margin-left: 50px; 则它不起作用
此快速解决方案不适用于 Bootstrap 行和列。您只需要更改结构，因此只有一个“main-content”元素和一个“sidebar”元素，手动调整大小而不是 BS cols。
这是响应式的吗？
如果你让它响应，它会的。例如使用百分比和@media 声明。在知道您正在使用 Bootstrap 之前，我刚刚给出了问题的解决方案。