position:fixed一個溢出屏幕的元素，如何顯示屏幕以外的內(nèi)容？

背景：
移動端的，點(diǎn)擊按鈕后彈出一個遮罩層顯示提示框，提示框中的內(nèi)容需可以滾動。

于是有了滾動穿透問題，在滾動提示框中的內(nèi)容時，底層div也可以滾動。

然后我百度了若干解決方法，方法大致意思是說，打開遮罩層時，設(shè)置body，html的position:fixed;overflow:hidden，并記錄打開前的滾動條位置，關(guān)閉時還原body，html的樣式。
我參考的博客鏈接
問題：
body，html這種元素很長時，溢出屏幕，滾動到底部位置時，使用position:fixed會導(dǎo)致在有遮罩層時，頁面會返回頂部，下圖左，position:fixed；overflow:hidden后想對body的top進(jìn)行設(shè)置，讓打開遮罩層時，顯示的內(nèi)容仍然為原來的內(nèi)容，而不是返回頂部。但是這樣設(shè)置，屏幕外的內(nèi)容就被截斷了，顯示空白，屏幕內(nèi)的內(nèi)容整體上移（safari）

所以我想問，有什么方法可以對上述設(shè)置過position：fixed；overflow：hidden的元素顯示指定部分的內(nèi)容。變成下圖右。

環(huán)境是react。
如果有方法麻煩詳細(xì)點(diǎn)。謝謝大佬們~

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