Modal causing double scroll Bar - html

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

Answer 2

So I've solved this issue before while building out my own jQuery modal plugin. Here's a link to the github repo, for reference: https://github.com/thecox/bw-box. I'll dig around and find some of the relevant styling that resolved the issue. Here's the main structure:
HTML
<div id="default-modal" class="bwbox__modal">
<div class="bwbox__modal__outer">
<div class="bwbox__modal__middle">
<div class="bwbox__modal__inner">
CLOSE X
<div class="bwbox__modal__inner__content">
<!-- Content Goes Here -->
</div>
</div>
</div>
</div>
</div>
CSS
.bwbox__modal {
position: fixed;
display: none;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: rgba(0, 0, 0, .8);
overflow-y: scroll;
z-index: 9999;
}
.bwbox__modal__outer {
display: table;
position: absolute;
height: 100%;
width: 100%;
}
.bwbox__modal__middle {
position: relative;
display: table-cell;
vertical-align: middle;
}
.bwbox__modal__inner {
position: relative;
background: #fff;
font-size: 1em;
font-weight: 300;
text-align: left;
color: #555;
width: 90%;
max-width: 885px;
z-index: 9999;
padding: 2em 2% 1em;
margin: 30px auto;
.bwbox__modal__inner__content {
width: 100%;
height: 100%;
z-index: 9999;
text-align: center;
}
.bwbox__modal__inner__close {
position: absolute;
color: #555;
top: 10px;
right: 20px;
font-size: .9em;
text-decoration: none;
}
Basically, the outer, middle, and inner containers center the container vertically and horizontally in the frame in such a way that if they expand beyond the window height, you can still scroll. Maybe pull it down and check out the demo.Let me know if you have any questions.

Answer 3

In Angular, similar to Leon Burman's answer:
setBodyModalHidden(isHidden: boolean) {
document.getElementsByTagName('body').item(0).style.overflowY = isHidden ? 'hidden' : '';
}