Как убрать скролл при открытом боковом меню?

Question

[Юра]

Привет, нашёл боковое меню а чистом CSS:

<!-- Правое меню -->
<input type="checkbox" id="hmt" class="hidden-menu-ticker">
<label class="btn-menu" for="hmt"><div class="iconmenu"><div class="symbol"></div><div class="attribute">MENU</div></div></label>
     <div class="hidden-menu">
         <div class="menucon">
             <?php echo $this->render_plugins('categories')?>
	     </div>
     </div>
<div class="maska"></div>

/* Правое меню */
.hidden-menu { position:fixed; z-index:98; display:block; border-left:1px solid #333333; background:rgba(51,51,51,0.9); width:305px; height:100%; top:0; right:-305px; transition:right .5s; list-style:none; margin:0; -webkit-transform:translateZ(0); -webkit-backface-visibility:hidden; box-sizing:border-box; overflow-y:auto;}
.hidden-menu-ticker { display:none;}
.maska { display:block; position:fixed; top:0; left:0; z-index:97; width:100%; height:100%; background:rgba(0,0,0,0.5); visibility:hidden; opacity:0;} /* Затемнение */
.hidden-menu-ticker:checked ~ .btn-menu       { top:5px; right:178px; border:transparent; background:transparent;}
.hidden-menu-ticker:checked ~ .hidden-menu { right:0; box-shadow:-3px 0px 3px 0px rgba(0,0,0,0.3);}
.hidden-menu-ticker:checked ~ .maska { visibility:visible; opacity:1; -webkit-transition:opacity .5s, visibility .5s; transition:opacity .5s, visibility .5s;} /* Затемнение */
.btn-menu     { position:fixed; z-index:99; border:1px solid #262626; border-radius:3px; top:30px; right:30px; background:rgba(51,51,51,0.9); cursor:pointer; transition:right .5s; padding:10px 10px 10px 10px; -webkit-transform:translateZ(0); -webkit-backface-visibility:hidden; box-sizing:border-box;}
.symbol         { float:left; background:url(../background/menu.png) no-repeat 0% 50%; background-size:cover; width:24px; height:24px; overflow:hidden; box-sizing:border-box;}
.attribute   { float:left; color:#FFFFFF; font-size:17px; font-weight:400; margin-left:10px; overflow:hidden; box-sizing:border-box;}

Как сделать, что бы при открытии меню убрать скролл Body, а в самом меню скролл оставить, и если не трудно подскажите, как сделать, что бы при клике вне меню оно закрылось.

Может проблема в том, что я добавил маску затемнения?

Answer 1

[Евгений Калибров]

В CSS Level 4 вы сможете написать, что-то вроде этого, что бы спрятать скролл у body, при открытии боковой панели:

body:has(.hidden-menu-ticker:checked) {
    overflow-y: hidden;
}

Но в настоящие время селектор :has ещё не поддерживается браузерами, других вариантов сделать это на css-3 я не вижу. По-моему проще добавить пару строк кода на JS, что бы при открытии меню у body добавлялся css-класс, а при закрытии убивался, по этому классу вы сможете уже написать любые нужные вам стили.