Olá, estou criando um site onde uma das páginas possui uma lista com vários itens clicáveis (como uma ‘vitrine’ de lojas online), ao serem clicados abrirá um modal que ficará na frente de todo conteúdo. Porém se a página possuir scroll, mesmo com o modal aberto, ainda é possível interagir com o fundo, e o modal só fica ocupando metade da altura, o ideal seria que ao abri o modal o fundo não rolasse, e ao fechar o modal, a rolagem da página voltasse a ser ativada.
Ou seja, preciso que ao clicar no botão do modal, a rolagem seja desativada e ao fechar o modal, a rolagem seja ativada.
Vi alguns exemplos com html puro, mas que não se aplicaram no ReactJS. Alguém pode me ajudar?