如何实现父元素滚动到位后子元素无缝续滚？附演示示例

补充说明 #

这里有一个更贴合需求的演示示例，核心表现是：查看所有子元素内容需要分两次滚动——先滚动使父元素完全进入视野，再滚动父元素内的子元素内容。

我的问题是如何实现无缝滚动？即让第一次滚动的“动量”直接延续到第二次滚动中，消除两次滚动的割裂感。

原问题 #

如何无缝实现图中的滚动行为？父元素高度固定，我可以用position:sticky属性让它固定在视口，但结合overflow:scroll属性时，子元素会在父元素到达停止位置前就开始在父元素内滚动。

我已做出初步效果的演示示例，但当前父元素滚动与子元素在父元素内的滚动之间过渡不够流畅，希望解决这个问题。

内容的提问来源于stack exchange，提问作者Jake Xia