React-modal: Scrolling the Modal content

[mmarinm]

Summary:

I included class rule for preventing background scrolling

    .ReactModal__Body--open {
        overflow: hidden;
        position: fixed;
        width: 100%;
        height: 100%;
    }

but when the modal opens I want to scroll the content inside of it. Can someone help me I am not able to find an appropriate solution in closed issues?

[diasbruno]

Hi @mmarinm, do you mean the content inside de overlay or the real content inside the modal?

[mmarinm]

The content inside that modal

[diasbruno]

Hmm, ok. You can make a frame for the scrollable region.

<Modal ...>
  <div className="frame"> <!-- define the height and overflow-y: auto for frame -->
    <div className="scroll"> <!-- wrapper for the content -->
          [...] <!-- your content -->
    </div>
  </div>
</Modal>

Something like this would work, probably you will need to make some tweaks on this example.

[mmarinm]

Ok, Thank you, It might be also related to the library I use for smooth scrolling. I decided to use router instead of the modal

[Monte9]

@diasbruno your solution works like a charm. 🌟 Thanks a lot for your help!

[diasbruno]

@Monte9 I've updated the example, because it was really bad code. :)