Показать сообщение отдельно
  #7 (permalink)  
Старый Сегодня, 20:27
Новичок на форуме
Отправить личное сообщение для thresayoung Посмотреть профиль Найти все сообщения от thresayoung
 
Регистрация: 29.04.2026
Сообщений: 3

Сообщение от DVV Посмотреть сообщение
В нормальных браузерах в мобильном режиме при клике на гамбургер открывается мобильное меню и body присваивается класс с overflow: hidden, чтобы избежать скролла вниз при открытом меню. При закрытии меню класс убирается. При клике на пункт меню этот класс также убирается и срабатывает скролл к нужной секции. Но в IE при клике на пункт меню в мобильном режиме скролл к нужно секции срабатывает, а класс не убирается. В результате скролл в ручную не работает и приходится обновлять страницу, чтобы появилась возможность скролла.ai image extender free online

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');
        } 
    });
 
})();
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.
Ответить с цитированием