在没有jquery的css中滚动优先级

Question

我的 boostrap 容器中有三个不同高度的粘性 div。

是否可以为我的主容器设置滚动优先级？

<div id="header">Header</div>
<div class="container">
    <div class="row">
        <div id="side-l" class="col-sm-3">
          <p>Sidebar left</p>
          <p class="bottom-most">This is not that important</p>
        </div>
        <div id="main"  class="col-sm-7">
          <p>Main</p>
          <p class="bottom-most">I want to see this asap</p>
        </div>
        <div id="side-r"  class="col-sm-2">
           <p>Sidebar right</p>
        </div>
    </div>
</div>

立即申请： 当我滚动时，主容器直到side-l 到达底部才会滚动。

我的目标： 当我滚动时，当 div-height 大于 window-height 时，主容器应该立即滚动。

注意 容器的高度可能会根据其内容而有所不同。它们没有固定的高度。

如果这不可能，是否有一个选项，您只能滚动悬停的元素？

JS 小提琴： https://jsfiddle.net/h5m7ovsb/3/

Answer 1

我在下面添加了一个小提琴链接。请检查这是否对您有帮助。

我已经编辑了下面的 CSS 代码：

#side-l {
  height: 1800px;
  background: rgba(255,0,0,0.1);
  position: relative; 
  top: 0px; 
}

https://jsfiddle.net/xLmuffyx/