Scroll with scrollbar on Big modal windows

[theposch]

Is it possible to scroll using the scrollbar on large modal windows? right now, clicking the scrollbar will close the modal.

[adamschwartz]

Since the .vex element is set to overflow: auto in all included themes, there is a scrollbar present on that element.

Unfortunately, since the .vex-overlay element is behind .vex-content (but still a child of .vex) it catches clicks before they reach down to the scrollbar. So you have a few options to achieve what you want:

• Leave the overlay there but set pointer-events: none so that the click event passes through to the scrollbar:

  .vex-overlay {
      pointer-events: none
  }

• Hide the overlay entirely:

  .vex-overlay {
      display: none
  }

• Move the right edge of the overlay over a bit so that the scrollbar can be seen below it.

  .vex-overlay {
      right: 16px /* Approximate scrollbar width */
  }

If you go with this last option I'd recommend setting the .vex-overlay's right CSS property only in the event you detect a scrollbar is present. You can do this using the technique outlined in my comment here.

[tvavrys]

I ran into the same issue. None of the solutions you mentioned have worked for me. I consider them as workarounds. Do you plan to fix it and change the structure of elements?

[adamschwartz]

@tvavrys thanks for the push.

I think the right call is to change the structure to something like this:

<div class="vex">
    <div class="vex-overlay"></div>
    <div class="vex-content-scroll">
        <div class="vex-content"></div>
    </div>
</div>

As this will be a breaking change, it will probably necessitate a major version bump.

In the meantime, the third solution above should work just fine, and in some ways, it may even be preferred. Would you mind giving it another shot and letting me know what seems to be failing?

[tvavrys]

I remember that the third solution does not solve scrolling problem (middle button scrolling) when you have your mouse over vex-overlay.

The new structure should solve this problem, but I completely understand your concerns regarding the major version bump. It's not a small change.

[sebastianhelbig]

To have scrolling on the overlay and also be able to close the content with a click on the overlay:

.vex-overlay {
    pointer-events: none;
}

var vexContent = vex.open({...});
$('.vex').click(function() {
    vex.close(vexContent.data().vex.id);
});
$('.vex-content').click(function(event) {
    event.stopPropagation();
});