打开时反应模态滚动顶部

Question

I use react-modal to create a open modal form (similar create post modal form facebook).

My expect:

When modal is open: scrollbar of window still show but thumb disabled (user can't scroll)

When modal is close: scrollbar of window show and thumb show.

My problem:

When modal is open, scrollbar always on top (top = 0). I know because my css body { position: fixed } but I want modal look like my expect

Here is my codesandbox for my problem: https://codesandbox.io/s/scroll-modal-form-rw2sf

Sorry about my bad english and thanks for your help.

Answer 1

I set the style of class ReactModalPortal and adjust the z-index. In addition remove the style of body. There is a sandbox

/* index.css */
.ReactModalPortal {
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    z-index: -1;
}

// App.js
...
const portal = document.querySelector(".ReactModalPortal");
portal.style.zIndex = 0;
...
const portal = document.querySelector(".ReactModalPortal");
portal.style.zIndex = -1;

Maybe it is not as your expectation, but you could modify it.