Javascript.RU

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

Проблема с мобильным меню в 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');
        } 
    });
 

})();
Ответить с цитированием
  #2 (permalink)  
Старый 15.04.2020, 15:28
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,485

Вероятно дело в
window.screen.availWidth

https://developer.mozilla.org/en-US/..._compatibility
Ответить с цитированием
  #3 (permalink)  
Старый 15.04.2020, 15:33
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 1,438

Ну так человек надеется на Бабель с поддержкой ИЕ
Ответить с цитированием
  #4 (permalink)  
Старый 15.04.2020, 18:07
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,485

Сообщение от voraa
Ну так человек надеется на Бабель с поддержкой ИЕ
Babel, вроде как, не может эту строку транспилировать.
Может я какие модули не подключил, но у меня строка осталась прежней.
Ответить с цитированием
  #5 (permalink)  
Старый 01.05.2020, 11:19
DVV DVV вне форума
Кандидат Javascript-наук
Отправить личное сообщение для DVV Посмотреть профиль Найти все сообщения от DVV
 
Регистрация: 26.12.2017
Сообщений: 115

Убрал событие resize на проверку ширины экрана и все заработало
Ответить с цитированием
  #6 (permalink)  
Старый 16.05.2020, 00:51
DVV DVV вне форума
Кандидат Javascript-наук
Отправить личное сообщение для DVV Посмотреть профиль Найти все сообщения от DVV
 
Регистрация: 26.12.2017
Сообщений: 115

Спасибо, получилось
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
mouseover jquery SolomonRei Элементы интерфейса 0 27.11.2018 17:41
Не работает свое меню после AJAX AnonimS jQuery 6 07.02.2018 21:51
Выделение активных пунктов многоуровневого меню на jQuery Letto Элементы интерфейса 2 04.12.2013 14:30
Проблема с аккордионом и меню Tie ExtJS 3 01.09.2011 14:36
Проблема с меню акордеоном technokid Библиотеки/Тулкиты/Фреймворки 0 24.05.2011 15:15