Preventing background scroll on modals

by hohoya33

HTML

<button id="btn">Modal</button>
<main>
	Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo aliquam expedita eius officiis, fugiat velit ipsum dolorem ullam eaque veritatis quaerat facere iste harum nesciunt. Magnam officia animi minima porro.
	<p>
		Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo aliquam expedita eius officiis, fugiat velit ipsum dolorem ullam eaque veritatis quaerat facere iste harum nesciunt. Magnam officia animi minima porro.
	</p>
	<p>
		Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo aliquam expedita eius officiis, fugiat velit ipsum dolorem ullam eaque veritatis quaerat facere iste harum nesciunt. Magnam officia animi minima porro.
	</p>
	<p>
		Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo aliquam expedita eius officiis, fugiat velit ipsum dolorem ullam eaque veritatis quaerat facere iste harum nesciunt. Magnam officia animi minima porro.
	</p>
	<p>
		Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo aliquam expedita eius officiis, fugiat velit ipsum dolorem ullam eaque veritatis quaerat facere iste harum nesciunt. Magnam officia animi minima porro.
	</p>
	<p>
		Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo aliquam expedita eius officiis, fugiat velit ipsum dolorem ullam eaque veritatis quaerat facere iste harum nesciunt. Magnam officia animi minima porro.
	</p>
	<p>
		Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo aliquam expedita eius officiis, fugiat velit ipsum dolorem ullam eaque veritatis quaerat facere iste harum nesciunt. Magnam officia animi minima porro.
	</p>
	<p>
		Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo aliquam expedita eius officiis, fugiat velit ipsum dolorem ullam eaque veritatis quaerat facere iste harum nesciunt. Magnam officia animi minima porro.
	</p>
	<p>
		Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo aliquam expedita eius officiis, fugiat velit ipsum dolorem ullam eaque veritatis...

SCSS

.mo_menu_layout___3Khai.active___3VPGL {
    display: block;
}

.mo_menu_layout___3Khai {
    clear: both;
    display: none;
    position: fixed;
    z-index: 100;

    bottom: 0;
    left: 0;
    right: 0;
    top: 0;

}

.mo_menu_area___Qcsy7 {
    background-color: #fff;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    position: absolute;
    right: 0;
    top: 0;
    width: 270px;
    z-index: 100
}

.mo_menu_layout___3Khai.active___3VPGL .mo_menu_area___Qcsy7 {
    animation-duration: .25s;
    animation-fill-mode: both;
    animation-name: slideInRight___1vdka;
    animation-timing-function: ease-in-out;
}


@keyframes slideInRight___1vdka {
    0% {
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
        visibility: visible
    }

    to {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
}




html,body {
	font-family: sans-serif;
}
html {
	&[data-modal-active="true"] {
		touch-action: none;
		overscroll-behavior: none;
		-webkit-overflow-scrolling: auto;
		overflow: hidden;
	}
}

body {
	[data-modal-active="true"] & {
		touch-action: none;
		overscroll-behavior: none;
		-webkit-overflow-scrolling: auto;
		overflow: hidden;
	}
}

aside {
	position: absolute;
	z-index: 100;
	background-color: #777;
	top: 50%;
	left: 50%;
	overflow: auto;
  overscroll-behavior: contain;
	max-height: 50vh;
	transform: translate(-50%, -50%);
	display: none;
	flex-direction: column;
	[data-modal-active="true"] & {
		display: flex;
	}
}

JavaScript

var btn = document.getElementById("btn");

btn.addEventListener("click", e => {
	document.documentElement.setAttribute("data-modal-active",
		document.documentElement.getAttribute("data-modal-active") === "true" ? "false" : "true")
});





(jQuery, Hammer),
function($) {
    tvcast.m.Extension = eg.Class.extend(eg.Component, {
        construct: function(options) {
            this._assignVar(),
            this._bindEvent(),
            this.$side.hide()
        },
        _assignVar: function() {
            this.$side = $("#aside"),
            this._iScroll = !1,
            this._isMenuOpen = !1,
            this._tmpInnerHeight = 0,
            this._isShow = !1,
            this._asideWidth = this.$side.width(),
            this._isHWAccelerable = eg.isHWAccelerable(),
            this._transformStart = this._isHWAccelerable ? "translate3d(" : "translate(",
            this._transformEnd = this._isHWAccelerable ? ",0px)" : ")",
            this._dim = new tvcast.m.Dim
        },
        _bindEvent: function() {
            $(window).on("rotate", $.proxy(this._onRotate, this)),
            this._dim.on({
                tap: $.proxy(this.hide, this)
            })
        },
        _onRotate: function() {
            this.resetScroll(),
            this._resetSidePos()
        },
        _initSideScroll: function() {
            this._iScroll || (this.$side.height(window.innerHeight),
            this._iScroll = new IScroll($("#aside").get(0),{
                click: !0,
                tap: !0,
                bUseMouseScroll: !1,
                momentum: !0,
                bounce: !0,
                scrollX: !1,
                scrollY: !0,
                deceleration: .002,
                HWCompositing: eg.isHWAccelerable(),
                useTransition: eg.isTransitional(),
                disablePointer: !0,
                disableTouch: !1,
                disableMouse: !0
            }))
        },
        _resetSidePos: function() {
        ...