How to use the main window scroll bar to scroll a modal?

Viewed 989

The problem is that if you have a long modal, then you need to add an option to scroll it down.

However, adding a scroll bar to the modal itself would be bad for UX, cause people are intuitively used to scrolling with the scroll bar at the right end of the screen.

Several websites have this figured out, like Twitter and Product Hunt:

enter image description here enter image description here

I can't still understand how to implement it. I have been searching for some materials online, but unfortunately couldn't find any.

If you have an idea on how it's done, please let me know.

Update:

Here are the styles for my current modal:

.modal {
    box-shadow:0 12px 30px rgba(0,0,0,0.3);
    z-index:103;
    border-radius:5px;
    text-align:center;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    top: 60px;
    position:fixed;
    overflow-y: auto;
    overflow-x: hidden;
    max-height: calc(100vh - 100px);
 }
1 Answers
Related