Html css中不带jquery的滚动优先级

我有三个粘乎乎的

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高度大于window高度时，主容器应该立即滚动

注意容器的高度可能因其内容物而异。他们没有固定的高度

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

Js小提琴：

---

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

我已经编辑了以下CSS代码：

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

---

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

我已经编辑了以下CSS代码：

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

---

不，它没有帮助。我想滚动主容器以立即滚动。不，它没有帮助。我想滚动主容器以立即滚动。