div 的特定滚动行为

Question

有没有人注意到推特网站的滚动行为，

在这个网站最右边的 div 停止滚动，当它结束但中间的继续滚动时，我想在我的网站上出现这种行为但无法做到这一点，请帮助！！这是我的起始代码

    .parent {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        position: static;
        top: 0;
    }
    .parent > * {
        width: 100%;
    }
    .child1 {
        background: tomato;
        border: 10px solid green;
        height: 5000vh;
    }

    .child2 {
        height : 500vh;
        border: 10px solid pink;
        position: sticky;
        background: skyblue;
        color: white;
        top: 0;
        bottom: auto;
    }

<div class="parent">
    <div class="child1"></div>
    <div class="child2"></div>
</div>

Answer 1

你是这个意思吗？使用

overflow:scroll;

可以实现这一点。

.scroll{
  background:red;
  width:200px;
  height:100px;
  overflow:scroll;
}

<div class="scroll">
  <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br>