Javascript bootstrap 4仅滚动中间列/类似facebook的滚动

我在引导中有3列，我只想滚动中间的部分，同时保持相对于父容器的位置。类似facebook滚动的东西

<div class="container">
  <div class="row">
    <div class="col-md-3">stop scrolling when content end </div>
    <div class="col-md-6"> SCROLL </div>
    <div class="col-md-3"> stop scrolling when content end </div>
  </div>
</div>

内容结束时停止滚动
纸卷
内容结束时停止滚动

---

我尝试使用position fixed，但当我使用它时。它会弄乱网格系统，这就是为什么我希望位置尽可能保持相对于父对象的位置。

如果我理解这个问题，你可以像这样使用

sticky top

一边
纸卷
一边

中间一栏将滚动其内容的长度

<div class="container">
  <div class="row">
    <div class="col-md-3"> <div class="sticky-top">side</div> </div>
    <div class="col-md-6"> SCROLL </div>
    <div class="col-md-3"> <div class="sticky-top">side</div> </div>
  </div>
</div>