在子级中滚动后，ReactJS平滑地滚动父级

Question

我正在尝试在

上制作像this page这样的平滑滚动效果

<div class="portrait-mode column large-3 medium-4 small-12 large-last">
    <figure class="image-feature image-portrait-mode"></figure>
    <div class="copy-block">
        <h3 class="subsection-headline typography-overview-intro-reduced large-show-inline">Portrait mode.</h3>
        <p class="typography-overview-intro-reduced large-show-inline">iPhone&nbsp;X<span class="small-caps">R</span> uses a single-lens camera and machine learning to keep people in the foreground in sharp focus against an artfully blurred&nbsp;background.</p>
    </div>
</div> 

（“突破性摄像头系统”之后，在照片上方滚动文字）

使用React。

基本上，浏览器在包含文本的子div中滚动，然后在到达子底部时，开始滚动父级。不包括该示例页面上的精美缩放。

我曾尝试添加addEventListener并使用react-scroll，但无法达到平滑的滚动效果。用户必须先暂停，然后浏览器才能选择父级。

你知道吗？