Overflow: auto не работает для дочернего элемента

179

25 ноября 2018, 05:50

Есть вертикальное меню. При его открытии на мобильном устройстве оно не помещается на экран по высоте:

При этом бекграунд скроллится свободно. Решил проблему бекграундного скролла невешиванием события $('body').toggleClass('no-scroll');. А вот со скроллом самого меню почему-то не выходит. Попробовал ему повесить: $('.head_menu_wrap').toggleClass('overflowadd'); - не работает. overflow-y:auto - тоже

css:

.no-scroll{overflow:hidden};
.overflowadd{overflow:auto};

js+html:

...
<body>
<div class="head_menu_wrap"></div>
<script type="text/javascript">
  function changeclass() {
    $('body').toggleClass('no-scroll');
    $('.head_menu_wrap').toggleClass('overflowadd');
  }
</script>
<div class="burger-wrap">
    <a href="#" class="" onClick="changeclass()" id="burger">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </a>
</div>
</body>
...

Answer 1

не тот див пытаешься скролить
вот одно из решений

<style>
    body.no-scroll{
        overflow: hidden;
    }
    .show{
        position: fixed;
        top: 25px;
        left: 250px;
        z-index: 10;
      padding:20px
    }
    .menu-box{
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        display: none;
    }
    .menu-box._active{
        display: block;
    }
    .head_menu_wrap{
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: #000;
        opacity: .75;
    }
    .burger-wrap span{
        display: block;
        padding: 20px 100px;
        border-bottom: 1px solid #4e4e4e;
    }
    .burger-wrap{
        position: absolute;
        top: 0;
        bottom: 0;
        overflow-y: scroll;
        background: #fff;
        z-index: 1;
    }
</style>
<button class="show">show menu</button>
<div class="menu-box">
    <div class="head_menu_wrap"></div>
    <div class="burger-wrap">
        <a href="#" class="" onClick="changeclass()" id="burger">
            <span>1</span>
            <span>2</span>
            <span>3</span>
            <span>4</span>
            <span>4</span>
            <span>4</span>
            <span>4</span>
            <span>4</span>
            <span>4</span>
            <span>4</span>
            <span>4</span>
            <span>4</span>
            <span>4</span>
            <span>4</span>
            <span>4</span>
            <span>4</span>
            <span>4</span>
            <span>4</span>
            <span>4</span>
            <span>4</span>
        </a>
    </div>
</div>
<script>
$(".show").click(function () {
    $('body').toggleClass('no-scroll');
    $(".menu-box").toggleClass('_active');
});
</script>