Non-scrollable body when modal or slide nav are open

[mhulse]

html { height: 100%; }
body { min-height: 100%; }

html { overflow: hidden; }
body {
    overflow-x: hidden;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
}

body.ng-pageslide-body-open {
    position: fixed;
    width: 100%;
    top:0;
    left: 0;
    height: 100%;
    overflow-y: hidden;
    z-index: 10;
}
body.ng-pageslide-body-open::before {
    content: '.';
    display: block;
    position: absolute;
    top: 0;
    background-color: rgb(0,0,0);
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    opacity: 0.5;
    transition: opacity 1s;
}
body.ng-pageslide-body-closed::before {
    transition: opacity 1s;
    opacity: 0;
    content: '.';
    display: block;
    position: absolute;
    top: 0;
    background-color: rgb(0,0,0);
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    pointer-events: none;
}

[mhulse]

This works better as the scrollbar doesn't jump (only tested in chrome):

*,
*::before,
*::after {
-webkit-box-sizing: border-box;
 -khtml-box-sizing: border-box;
   -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
     -o-box-sizing: border-box;
        box-sizing: border-box;
}

html { height: 100%; }
body { min-height: 100%; }

html,
body { overflow-x: hidden; }
html {
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
}

body.ng-pageslide-body-open {
    position: fixed;
    width: 100%;
    top:0;
    left: 0;
    height: 100%;
    overflow-y: hidden;
    z-index: 10;
}
body.ng-pageslide-body-open::before {
    content: '.';
    display: block;
    position: absolute;
    top: 0;
    background-color: rgb(0,0,0);
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    opacity: 0.5;
    transition: opacity 1s;
}
body.ng-pageslide-body-closed::before {
    transition: opacity 1s;
    opacity: 0;
    content: '.';
    display: block;
    position: absolute;
    top: 0;
    background-color: rgb(0,0,0);
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    pointer-events: none;
}