Enable Scroll in Lnav while disabling it in gnav

libs/blocks/global-navigation/global-navigation.js

@@ -440,18 +440,13 @@ class Gnav {
 
     localNav.querySelector('.feds-localnav-title').addEventListener('click', () => {
       localNav.classList.toggle('feds-localnav--active');
-      document.body.classList.toggle('disable-scroll');
       const isActive = localNav.classList.contains('feds-localnav--active');
       localNav.querySelector('.feds-localnav-title').setAttribute('aria-expanded', isActive);
       localNav.querySelector('.feds-localnav-title').setAttribute('daa-ll', `${title}_localNav|${isActive ? 'close' : 'open'}`);
-      if (isActive) disableMobileScroll();
-      else enableMobileScroll();
     });
 
     localNav.querySelector('.feds-localnav-curtain').addEventListener('click', (e) => {
       trigger({ element: e.currentTarget, event: e, type: 'localNav-curtain' });
-      document.body.classList.remove('disable-scroll');
-      enableMobileScroll();
     });
     const promo = document.querySelector('.feds-promo-aside-wrapper');
     if (promo) localNav.classList.add('has-promo');
@@ -814,14 +809,14 @@ class Gnav {
     const toggle = this.elements.mobileToggle;
     const isExpanded = this.isToggleExpanded();
     if (!isExpanded && this.newMobileNav) {
-      disableMobileScroll();
       const sections = document.querySelectorAll('header.new-nav .feds-nav > section.feds-navItem > button.feds-navLink');
       animateInSequence(sections, 0.075);
       if (this.isLocalNav() && this.hasMegaMenu()) {
+        disableMobileScroll();
         const section = sections[0];
         queueMicrotask(() => section.click());
       }
-    } else if (isExpanded && this.newMobileNav) {
+    } else if (isExpanded && this.newMobileNav && this.isLocalNav()) {
       enableMobileScroll();
     }
     toggle?.setAttribute('aria-expanded', !isExpanded);
@@ -1180,7 +1175,7 @@ class Gnav {
               const offset = this.block.classList.contains('has-promo')
                 ? 'var(--feds-height-nav) - var(--global-height-navPromo)'
                 : 'var(--feds-height-nav)';
-              popup.style = `top: calc(${iOSy || y || 0}px - ${offset} - 1px`;
+              popup.style = `top: calc(${iOSy || y || 0}px - ${offset} - 2px`;
             }
             makeTabActive(popup);
           } else if (isDesktop.matches && this.newMobileNav && isSectionMenu) {

libs/blocks/global-navigation/utilities/utilities.js

@@ -313,12 +313,31 @@
   if (isDesktop.matches) setCurtainState(false);
 }
 
+export const disableMobileScroll = () => {
+  if (!PERSONALIZATION_TAGS.safari()) return;
+  if (document.body.classList.contains('disable-ios-scroll')) return;
+  if (document.body.style.top) return;
+  document.body.style.top = `-${window.scrollY}px`;
+  document.body.classList.add('disable-ios-scroll');
+};
+
+export const enableMobileScroll = () => {
+  if (!PERSONALIZATION_TAGS.safari()) return;
+  if (!document.body.style.top) return;
+  const y = Math.abs(parseInt(document.body.style.top, 10));
+  if (Number.isNaN(y)) return;
+  document.body.classList.remove('disable-ios-scroll');
+  document.body.style.removeProperty('top');
+  window.scroll(0, y || 0, { behavior: 'instant' });
+};
+
 export function trigger({ element, event, type } = {}) {
   if (event) event.preventDefault();
   const isOpen = element?.getAttribute('aria-expanded') === 'true';
   closeAllDropdowns({ type });
   if (isOpen) return false;
   element.setAttribute('aria-expanded', 'true');
+  if (!isDesktop.matches && type !== 'localNav-curtain') disableMobileScroll();
   return true;
 }
 
@@ -414,22 +433,6 @@
   tabs.forEach((t) => t.setAttribute('aria-selected', 'false'));
 };
 
-export const disableMobileScroll = () => {
-  if (!PERSONALIZATION_TAGS.safari()) return;
-  document.body.style.top = `-${window.scrollY}px`;
-  document.body.classList.add('disable-ios-scroll');
-};
-
-export const enableMobileScroll = () => {
-  if (!PERSONALIZATION_TAGS.safari()) return;
-  if (!document.body.style.top) return;
-  const y = Math.abs(parseInt(document.body.style.top, 10));
-  if (Number.isNaN(y)) return;
-  document.body.classList.remove('disable-ios-scroll');
-  document.body.style.removeProperty('top');
-  window.scroll(0, y || 0, { behavior: 'instant' });
-};
-
 export const transformTemplateToMobile = async (popup, item, localnav = false) => {
   const notMegaMenu = popup.parentElement.tagName === 'DIV';
   const originalContent = popup.innerHTML;
@@ -504,6 +507,7 @@
   });
   popup.querySelector('.main-menu')?.addEventListener('click', (e) => {
     e.target.closest(selectors.activeDropdown).querySelector('button').focus();
+    enableMobileScroll();
     closeAllDropdowns();
   });
   const tabbuttons = popup.querySelectorAll('.tabs button');

test/blocks/global-navigation/global-navigation.test.js

@@ -767,17 +767,22 @@ describe('global navigation', () => {
       headline.click();
       expect(headline.getAttribute('aria-expanded')).to.equal('true');
     });
-
-    it('adds the correct class when on Safari', async () => {
+    it('disables scroll for the popup but not for the localnav', async () => {
       Object.defineProperty(navigator, 'userAgent', { get: () => 'Safari' });
       await createFullGlobalNavigation({ globalNavigation: gnavWithlocalNav, viewport: 'mobile' });
       const localNavTitle = document.querySelector(selectors.localNavTitle);
       localNavTitle.click();
       const localNav = document.querySelector(selectors.localNav);
       const curtain = localNav.querySelector('.feds-localnav-curtain');
-      expect(document.body.classList.contains('disable-ios-scroll')).to.equal(true);
+      expect(document.body.classList.contains('disable-ios-scroll')).to.equal(false);
       curtain.click();
       expect(document.body.classList.contains('disable-ios-scroll')).to.equal(false);
+      const toggle = document.querySelector(selectors.mainNavToggle);
+      toggle.click();
+      expect(document.body.classList.contains('disable-ios-scroll')).to.equal(true);
+      const close = document.querySelector('.close-icon');
+      close.click();
+      expect(document.body.classList.contains('disable-ios-scroll')).to.equal(false);
     });
   });
 });