Показать сообщение отдельно
  #1 (permalink)  
Старый 15.04.2020, 13:38
DVV DVV вне форума
Кандидат Javascript-наук
Отправить личное сообщение для DVV Посмотреть профиль Найти все сообщения от DVV
 
Регистрация: 26.12.2017
Сообщений: 113

Проблема с мобильным меню в IE
В нормальных браузерах в мобильном режиме при клике на гамбургер открывается мобильное меню и body присваивается класс с overflow: hidden, чтобы избежать скролла вниз при открытом меню. При закрытии меню класс убирается. При клике на пункт меню этот класс также убирается и срабатывает скролл к нужной секции. Но в IE при клике на пункт меню в мобильном режиме скролл к нужно секции срабатывает, а класс не убирается. В результате скролл в ручную не работает и приходится обновлять страницу, чтобы появилась возможность скролла.
https://burobsn.ru

Код дан в первоначальном виде до прогонки через babel для поддержки IE. Все остальные скрипты в IE работают нормально. Проблема только в этом.

;(function() {
    const hamburger = document.getElementById('menu__button');
    const nav = document.querySelector('.nav')
    const navList = document.querySelector('.nav-list');
    const menuLinks = document.querySelectorAll('.nav__link');
    const body = document.getElementsByTagName('body')[0];
    let screenWidth = window.screen.availWidth;


    hamburger.addEventListener('click', mobileMenu);
    
    function mobileMenuLinkClick() {
        menuLinks.forEach(link => {
            link.addEventListener('click', () => {
                if (screenWidth < 1024) {
                    mobileMenuHide();
                }
            });
        });
    }
    mobileMenuLinkClick();

    function mobileMenu() {

        if(!hamburger.classList.contains('active')) {
            hamburger.classList.add('active');
            nav.classList.add('nav--open');
            navList.classList.add('nav-list--open');
            body.classList.add('no-scroll');
        } else {
            mobileMenuHide();
        }
    }

    function mobileMenuHide() {
        hamburger.classList.remove('active');
        nav.classList.remove('nav--open');
        navList.classList.remove('nav-list--open');
        body.classList.remove('no-scroll');
    }

    function menuLinksShow() {
        menuLinks.forEach(link => {
            link.style.opacity = '1';
        });
    }

    function menuLinksHide() {
        menuLinks.forEach(link => {
            link.style.opacity = '0';
        });
    }

    window.addEventListener('resize', () => {
        screenWidth = window.screen.availWidth;
        if (screenWidth > 1024) {
            menuLinksShow();
            hamburger.classList.remove('active');
            nav.classList.remove('nav--open');
            navList.classList.remove('nav-list--open');
            body.classList.remove('no-scroll');
        } 
    });
 

})();
Ответить с цитированием