Проблема с мобильным меню в IE

[DVV]

В нормальных браузерах в мобильном режиме при клике на гамбургер открывается мобильное меню и 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');
        } 
    });
 

})();

[Nexus]

Вероятно дело в

window.screen.availWidth

https://developer.mozilla.org/en-US/..._compatibility

[voraa]

Ну так человек надеется на Бабель с поддержкой ИЕ

[Nexus]

Ну так человек надеется на Бабель с поддержкой ИЕ

Babel, вроде как, не может эту строку транспилировать.
Может я какие модули не подключил, но у меня строка осталась прежней.

[DVV]

Убрал событие resize на проверку ширины экрана и все заработало

[DVV]

Спасибо, получилось

[thresayoung]

;(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');
        } 
    });
 
})();

Sounds like a classic IE quirk with event handling. It’s likely the click event for removing the overflow class isn’t firing properly after the scroll action. You might need to explicitly remove the class before triggering the scroll, or add a fallback for IE using setTimeout to ensure the class gets removed. IE often handles event order differently, so a small workaround like that usually fixes it.