ウィンドウのスクロールと要素内のスクロールを引き継ぎたい

Question

前提・実現したいこと

JavaScriptとcssを使って以下を実現したいです。

1. 特定の要素までスクロールしたらウィンドウのスクロールを一時的に止める
2. 画面のどこをスクロールしても要素内をスクロールさせる
3. 要素内の最下部までスクロールしたら、ウィンドウスクロールに切り替える

条件

• 1→2へ移る際は慣性スクロールを引き継ぎたい
• 下から上へ戻る際も、同様にスクロールの引き継ぎをしたい
• できれば特定の位置につくまでは要素内スクロールをさせたくない（スクロールは一貫して画面どこからでも操作可能にしたい）

発生している問題

JavaScriptで色々と書いてみたものの、慣性スクロールがうまく引き継げなかったり、スクロール制御が上手くできません。

テスト用ソースコード

https://codepen.io/caramel-sau/pen/vYmwzqV

参考サイト等

動きが近いサイト
https://monocoto-fs.jp/company
参考にしてみた記事
https://teratail.com/questions/269149

テスト用コードにどのように手を加えていくと実装できそうかご教授いただけると嬉しいです。
知識不足で大変恐縮ですがよろしくお願いいたします。