Solo-Web-Works/CWC
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

fix: lock body scroll while menu is open, scroll menu internally

Browse Source 
Per the user's request:

- Page scroll is locked when the mobile menu is open: add an
  :has() selector that applies overflow: hidden + touch-action: none to
  the <body> when the .nav-main__toggle has aria-expanded=true. Verified
  with mouse wheel and PageDown: window.scrollY stays at 0.

- Menu scrolls internally when its content overflows: switch
  .menu-vdi's 'overflow-hidden' to 'overflow-y: auto' with
  'overscroll-behavior: contain' so scroll gestures feed the menu
  rather than chain-scroll to the body behind it.

- Cap the menu at viewport height instead of growing: change
  'min-height: calc(100vh - var(--hgtHeader))' to
  'max-height: calc(100vh - var(--hgtHeader))' so the menu fills the
  visible space below the header and any overflowing items become
  scrollable inside the menu.
This commit is contained in:
Keith Solomon
2026-06-28 19:59:10 -05:00
parent 380e2d9015
commit 3db0ceaf8d
1 changed files with 59 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files
styles/navigation/nav-mobile-accordion.css
+39 -16
View File
@@ -14,39 +14,62 @@
} }
.menu-vdi { .menu-vdi {
@apply flex-col bg-white w-[95%] right-0 z-10 py-6; @apply relative right-0 py-8 flex flex-col;
@apply absolute hidden; /* Hidden by default */ @apply absolute hidden; /* Hidden by default */
top: var(--hgtHeader);
min-height: calc(100vh - var(--hgtHeader));
.menu-vdi__submenu { /* Allow the menu itself to scroll when content overflows the viewport */
@apply py-2 px-7 flex-col; overflow-y: auto;
overscroll-behavior: contain;
background: var(--color-cwc-blue-02);
color: var(--color-white);
/* Cap the menu height to the visible viewport area so overflowing items
scroll inside the menu instead of letting the menu grow taller
than the screen. */
max-height: calc(100vh - var(--hgtHeader));
top: var(--hgtHeader);
width: 95%;
z-index: 100;
&, ul.menu-vdi {
list-style: none;
padding-left: 0;
margin: 0;
} }
.menu-vdi__submenu { @apply py-2 px-7 flex-col; }
.menu-vdi__item { .menu-vdi__item {
a, list-style: none;
button {
a, button {
/* text */ /* text */
@apply font-bold text-20px text-black hover:text-light no-underline leading-snug; @apply font-bold text-20px text-white hover:underline leading-snug;
/* spacing & display */ /* spacing & display */
@apply block w-full p-4; @apply block w-full p-4;
/* interaction */ /* interaction */
@apply focus-visible:bg-secondary-200 hover:bg-secondary-200; @apply focus-visible:bg-secondary-200 hover:bg-secondary-200;
} }
a { a { @apply block w-full; }
@apply block w-full;
}
button { button { @apply flex w-full justify-between; }
@apply flex w-full justify-between;
}
} }
} }
/* Show menu when toggle button is expanded */ /* Show menu when toggle button is expanded */
.nav-main__toggle[aria-expanded="true"] ~ .menu-vdi:not(.menu-vdi--sliding) { .nav-main__toggle[aria-expanded="true"] ~ .menu-vdi:not(.menu-vdi--sliding) { @apply !flex; /* Use !important to override hidden */ }
@apply !flex; /* Use !important to override hidden */
} }
/* Lock the page from scrolling while the menu is open so the touch-scroll
gesture only scrolls the menu (or doesn't scroll at all if the menu
fits). Also stop the layout from jumping when the scrollbar disappears. */
html:has(.nav-main__toggle[aria-expanded="true"]) body,
body:has(.nav-main__toggle[aria-expanded="true"]) {
overflow: hidden;
overscroll-behavior: contain;
touch-action: none;
} }
} }