background:
Mobile, click the button and pop up a mask layer display prompt box, the contents of which need to be scrollable.

then there is the problem of scrolling through, and the underlying div can also be scrolled when scrolling the contents of the prompt box.

then I have several solutions for Baidu, which roughly means that when you open the mask layer, set the position:fixed;overflow:hidden, of body,html and record the position of the scroll bar before opening, and restore the style of body,html when closed.
I refer to the blog link
question:
body,html this element overflows the screen for a long time. When scrolling to the bottom position, using position:fixed will cause the page to return to the top when there is a mask layer. Left below, after position:fixed;overflow:hidden wants to set the top of body, so that when the mask layer is opened, the content displayed is still the original content, not back to the top. However, with this setting, the content outside the screen is truncated, the display is blank, and the content inside the screen is moved up (safari)

so I would like to ask if there is any way to display the contents of the specified part for the above position:fixed;overflow:hidden-set element. Change to the right of the following picture.

the environment is react.
if there is a method, please be more detailed. Thank you, bosses.

below, orange is the screen, and green is body or other elements that overflow the screen