CODEWITHSUNDEEP
javascriptcssmodal-dialog
Michael
Michael

Reputation: 16122

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

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);
 }

Upvotes: 3

Views: 1658

Answers (1)

Michael Coker
Michael Coker

Reputation: 53664

The scrollbar on twitter isn't the main window scrollbar - it's just a scrollbar in their modal dialog with is full screen, then they position the content of the modal dialog in the center. So when you scroll the modal, the scrollbar is on the far right, like the main window scrollbar.

To do that, I would just make your .modal a full screen modal with overflow: auto, then absolutely position the content of the modal inside of it. So you're scrolling the main .modal window, and the scrollbar is positioned to the far right like the main window scrollbar.

.modal {
  z-index: 103;

  text-align: center;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  overflow: auto;
}

.modalContent {
  position: absolute;
  top: 60px;
  left: 50%;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  border-radius: 5px;
  margin-bottom: 60px;
}
<div class="modal">
  <div class="modalContent">
    <p>blah</p>
    <p>blah</p>
    <p>blah</p>
    <p>blah</p>
    <p>blah</p>
    <p>blah</p>
    <p>blah</p>
    <p>blah</p>
    <p>blah</p>
    <p>blah</p>
    <p>blah</p>
    <p>blah</p>
    <p>blah</p>
    <p>blah</p>
    <p>blah</p>
    <p>blah</p>
    <p>blah</p>
    <p>blah</p>
    <p>blah</p>
    <p>blah</p>
    <p>blah</p>
    <p>blah</p>
    <p>blah</p>
    <p>blah</p>
    <p>blah</p>
    <p>blah</p>
    <p>blah</p>
    <p>blah</p>
    <p>blah</p>
    <p>blah</p>
    <p>blah</p>
    <p>blah</p>
    <p>blah</p>
    <p>blah</p>
    <p>blah</p>
    <p>blah</p>
    <p>blah</p>
    <p>blah</p>
    <p>blah</p>
    <p>blah</p>
    <p>blah</p>
    <p>blah</p>
    <p>blah</p>
    <p>blah</p>
    <p>blah</p>
    <p>blah</p>
    <p>blah</p>
    <p>blah</p>
    <p>blah</p>
    <p>blah</p>
    <p>blah</p>
    <p>blah</p>
    <p>blah</p>
    <p>blah</p>
  </div>
</div>

Upvotes: 2

Related Questions