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

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

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

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

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

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