Leon Burman Leon Burman - 5 months ago 20
CSS Question

Modal causing double scroll Bar

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

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