position:fixed一个溢出屏幕的元素，如何显示屏幕以外的内容？

Question

背景：
移动端的，点击按钮后弹出一个遮罩层显示提示框，提示框中的内容需可以滚动。

于是有了滚动穿透问题，在滚动提示框中的内容时，底层div也可以滚动。

然后我百度了若干解决方法，方法大致意思是说，打开遮罩层时，设置body，html的position:fixed;overflow:hidden，并记录打开前的滚动条位置，关闭时还原body，html的样式。
我参考的博客链接
问题：
body，html这种元素很长时，溢出屏幕，滚动到底部位置时，使用position:fixed会导致在有遮罩层时，页面会返回顶部，下图左，position:fixed；overflow:hidden后想对body的top进行设置，让打开遮罩层时，显示的内容仍然为原来的内容，而不是返回顶部。但是这样设置，屏幕外的内容就被截断了，显示空白，屏幕内的内容整体上移（safari）

所以我想问，有什么方法可以对上述设置过position：fixed；overflow：hidden的元素显示指定部分的内容。变成下图右。

环境是react。
如果有方法麻烦详细点。谢谢大佬们~

下图橙色是屏幕，绿色是body或者其他溢出屏幕的元素

Answer 1

让body高度100%，然后overflow scroll