Modal causing double scroll Bar

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