如何在移动导航激活时禁用滚动?

时间:2017-07-06 12:59:41

标签: javascript jquery html css ecmascript-6

我有移动导航,我需要这样做,导航处于活动状态时无法滚动,当它关闭时,他可以。它是example on codepen

这是JS:

var mainNavList = $('.header__nav'),
    mainNavToggle = $('.header__toggle'),
    overlay = $('.overlay'),
    _document = $(document);

_document.on('click', '.header__toggle', function(e) {
    e.preventDefault();
    mainNavList.toggleClass('header__nav_active');
    mainNavToggle.toggleClass('header__toggle_active');
    overlay.toggleClass('overlay_active');

    if (mainNavToggle.hasClass('header__toggle_active')) {
        document.onmousewheel = document.onwheel = function() {
            return false;
        };
        document.addEventListener("MozMousePixelScroll", function() {
            return false
        }, false);
        document.onkeydown = function(e) {
            if (e.keyCode >= 33 && e.keyCode <= 40) return false;
        };
        return false;
    }
});

_document.on('click', function(e) {
    if ($(e.target).closest(".header").length) return;
    if (mainNavList.hasClass("header__nav_active")) {
        e.preventDefault();
        mainNavList.removeClass('header__nav_active');
        mainNavToggle.removeClass('header__toggle_active');
        overlay.removeClass('overlay_active');
        e.stopPropagation();
    }
});

$('.header__nav-link, .sign-nav__link, .main-nav__link').on('click', function() {
    mainNavList.removeClass('header__nav_active');
    mainNavToggle.removeClass('header__toggle_active');
    overlay.removeClass('overlay_active');
});

P.S。溢出:隐藏身体是不可接受的

0 个答案:

没有答案