如何让全屏产品卡的内部可滚动div滚动被识别为主页面滚动？

正在开发一款Web应用，核心功能点包含可展开为全屏展示的产品卡片，开发过程中遇到几处滚动交互逻辑失效的问题：

• 全屏展开的产品卡片内部是独立可滚动的div，但原本会随页面下滑自动隐藏的浏览器顶栏，完全不响应这个内部div的滚动操作，只会对主页面的滚动作出反应——卡片展开时主页面本身是处于滚动锁定状态的
• 原本绑定在window对象上的滚动事件、专门用来实现下滑时隐藏菜单按钮的逻辑，在卡片内部滚动的场景下完全不触发判定
• 尝试做了自定义滚动条改造、把主页面整体包裹到自定义div容器后，顶栏的滚动响应逻辑彻底乱了：不管怎么滑，只有滚动到页面最底部时顶栏才会触发隐藏

• 修复上述各个场景下的滚动响应异常
• 有没有办法实现通用的滚动监听逻辑，能自动响应页面上所有可滚动区域的滚动操作，不用针对每个独立滚动容器单独写适配

附2张界面效果示例图，分别展示产品卡片收起、全屏展开状态的实际界面布局

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