Переключение overflow-y у модального окна и body

257

24 июля 2017, 12:38

Всем привет. Есть модальное окно, которое выезжает сверху. При этом необходимо, чтобы overflow-y был scroll, а также чтобы на странице всегда была 1 полоса прокрутки. Проблема заключается в том, что открытие данного модального окна идет с transition: .25s, из-за этого при открытии модального окна скролл модального окна открывается раньше, чем убирается скролл body, в следствие этого рядом со скроллом body появляется еще 1 скролл модального окна, а при закрытии модального окна его скролл убирается раньше, чем появляется скролл body.

Т.е. пользователь нажимает на кнопку, открывается модальное окно, скролл модального окна уже открыт, а скролл body еще не закрыт.

Наоборот происходит при закрытии модального окна - скролл модального окна убирается, а скролл body не добавляется.

Кто знает, как это пофиксить?

Код:

<body>
    <div class="popup">
        <div class="popup_item popup_slide"></div>
    </div>
</body>

jQuery:

var popup = $('.popup');
    $('.popup_open').click(function(){
        var link = $(this).attr('href');
        popup.show();
        setTimeout(function(){
            $('body').css('overflowY', 'hidden');
            $(link).addClass('popup_slide-active');
        }, 10);
    });
    $('.close_popups').click(function(){        
        $('.popup_slide').removeClass('popup_slide-active');    
        $('body').css('overflowY', 'auto');
        setTimeout(function(){
           popup.hide();
        }, 500);
    });