React弹出框的问题

#1

目标：点击某个按钮弹出显示详细信息的弹出框。在出现弹出框的时候页面禁止滚动

我的实现方式是把遮罩层和弹出的内容作为一个组件。通过点击事件改变state值从而判断弹出框是否被渲染。
如果被渲染。然后设置

body{
  overflow:hidden
}

但是在第一次点击渲染出弹出层的时候页面会自动跳到顶部。之后反复就不会出现这样的问题。没有没大神告诉我原因是什么。本人第一次用react写项目

#2

建议使用 UI 框架、、、 自己写 modal框 想想都麻烦。，。。

#3

这个项目已经上线了。我最后没有实现禁止滚动。产品表示无所谓。我就想知道这是为什么。这个问题困惑我快一周了

#4

弹出来自后，捕获滚动事件禁止滚动就可以了

#5

我捕获了body的滚动然后禁止了默认事件。没用！其实我最想知道的还是为什么出现这个问题。