Javascript 有没有办法将滚动捕捉与常规滚动结合起来？

我试图将CSS

滚动捕捉

行为与常规滚动结合使用。 关键是要有可捕捉但可滚动的部分。到目前为止，我提出的所有解决方案都有某种缺陷

解决方案#1 JSFiddle:

说明：所有部分都是同级的，可以捕捉

问题：捕捉“占主导地位”，沿下一个可捕捉部分的方向滚动时，几乎无法到达离开视口的部分

解决方案#2 JSFiddle:

说明：可捕捉部分位于其自己的容器中，

滚动捕捉：邻近性

set

问题：

滚动捕捉

容器即使未完全在视口中也可以滚动-捕捉（由于

滚动捕捉：接近

声明）

视频：

有没有办法将这两种行为（滚动捕捉和常规滚动）结合起来，使它们在不同的设备（惯性触摸板、常规鼠标、触摸屏）上工作？欢迎任何解决办法