reactjs - 打开时反应模式滚动顶部

Question

我react-modal用来创建一个开放的模态表单（类似的创建帖子模态表单 facebook）。

我的期望：

模式打开时：窗口的滚动条仍显示但拇指禁用（用户无法滚动）

当模态关闭时：窗口显示和拇指显示的滚动条。

我的问题：

当模式打开时，滚动条总是在顶部（顶部 = 0）。我知道是因为我的 cssbody { position: fixed }但我希望模态看起来像我期望的那样

这是我的问题的代码框：https ://codesandbox.io/s/scroll-modal-form-rw2sf

抱歉我的英语不好，感谢您的帮助。

标签： reactjsmodal-dialogscrollbarreact-modal

Answer 1

我设置了类 ReactModalPortal 的样式并调整了 z-index。另外去掉body的样式。有一个沙箱

/* 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;

也许它不是你的期望，但你可以修改它。