Modal causing double scroll Bar

Question

Opening a modal on my site is causing a double scroll bar (both vertical) issue. The modal uses position: fixed and overflow: auto. I know it is overflow: auto causing the issue, but I need this style, as my modal contains a lot of content which in most cases could not fit in the users viewport, therefore scrolling the content is a requirement.

.enquire-nav {
    font-family: inherit;
    top: 0;
    left: 0;
    z-index: 999;
    position: fixed;
    width: 100%;
    height: 100%;
    overflow: auto;
    background: rgba(36, 32, 33, .97);
}

Thanks in advance :]

Answer 1

In the end I found that the best solution was to toggle a class on the body when the modal is opened, this class would add overflow-y: hidden. This allows me to scroll the content of the modal if it overflows the body, but doesn't allow scrolling of the body itself at the same time. No more double scroll bars.

The jQuery:

  $(".menu-trigger, .primary-nav-item, .hamburger-one").click(function () {
    $(".mobilenav").fadeToggle(500);
    $(".top-menu").toggleClass("top-animate");
    $(".mid-menu").toggleClass("mid-animate");
    $(".bottom-menu").toggleClass("bottom-animate");
    $('body').toggleClass("no-scroll");

  });

The CSS:

.no-scroll {
    overflow-y: hidden;
}