fix(docs-infra): contain scroll within adev dropdown menus · angular/angular@dd29713 · GitHub

angular / angular Public

• Notifications You must be signed in to change notification settings
• Fork 27.4k
• Star 101k

• Code
• Issues 986
• Pull requests 168
• Discussions
• Actions
• Projects
• Security and quality 32
• Insights

Additional navigation options

Commit dd29713

Browse filesBrowse the repository at this point in the historyBrowse files

erkamyaman

authored and

amishne

committed

fix(docs-infra): contain scroll within adev dropdown menus

Scrolling to the top or bottom of a dropdown let the scroll event chain into the page behind it, causing the whole app to scroll. #70137 fixed this for the version picker, but the same containment was missing on every other menu. The API reference filter, the tutorial step list and the update guide's version dropdowns already had a scroll container, so they only needed overscroll-behavior. The social and theme mini-menus had neither a height cap nor overflow, so overscroll-behavior alone would have been inert on them. They now share the version picker's max-height/overflow-y/overscroll-behavior, hoisted onto .adev-mini-menu, which also keeps their items reachable when the viewport is too short to fit the whole menu.

1 parent 66c5ea7 commit dd29713
Copy full SHA for dd29713

4 files changed

+6-3Lines changed: 6 additions & 3 deletions

File tree

Expand file treeCollapse file tree

Open diff view settings

Filter options

• adev
  • shared-docs/components/select
    • select.component.scss
  • src/app
    • core/layout/navigation
      • mini-menu.scss
    • features
      • tutorial
        • tutorial-navigation-list.scss
      • update
        • update.component.scss

Expand file treeCollapse file tree

Open diff view settings

Collapse file

‎adev/shared-docs/components/select/select.component.scss‎

Copy file name to clipboardExpand all lines: adev/shared-docs/components/select/select.component.scss

+1Lines changed: 1 addition & 0 deletions

Original file line number	Diff line number	Diff line change
@@ -171,6 +171,7 @@
171	171	flex-direction: column;
172	172	max-height: 12rem;
173	173	overflow: auto;
	174	+ overscroll-behavior: contain;
174	175	padding: 0.25rem;
175	176	}
176	177

Collapse file

‎adev/src/app/core/layout/navigation/mini-menu.scss‎

Copy file name to clipboardExpand all lines: adev/src/app/core/layout/navigation/mini-menu.scss

+3-3Lines changed: 3 additions & 3 deletions

Original file line number	Diff line number	Diff line change
@@ -11,6 +11,9 @@
11	11	border-radius: 0.25rem;
12	12	z-index: var(--z-index-mini-menu);
13	13	box-shadow: 10px 4px 40px 0 rgba(0, 0, 0, 0.075);
	14	+ max-height: 70dvh;
	15	+ overflow-y: auto;
	16	+ overscroll-behavior: contain;
14	17
15	18	// Animation for mini-menu appearance
16	19	animation: menuFadeIn 0.2s ease-out forwards;
@@ -107,9 +110,6 @@
107	110	}
108	111
109	112	.adev-version-picker {
110		- overflow-y: auto;
111		- overscroll-behavior: contain;
112		- max-height: 70dvh;
113	113	margin-inline-start: 10px;
114	114
115	115	li {

Collapse file

‎adev/src/app/features/tutorial/tutorial-navigation-list.scss‎

Copy file name to clipboardExpand all lines: adev/src/app/features/tutorial/tutorial-navigation-list.scss

+1Lines changed: 1 addition & 0 deletions

Original file line number	Diff line number	Diff line change
@@ -6,6 +6,7 @@
6	6	list-style: none;
7	7	overflow-y: auto;
8	8	overflow-x: hidden;
	9	+ overscroll-behavior: contain;
9	10	height: 100vh;
10	11	padding: 0;
11	12	margin: 0;

Collapse file

‎adev/src/app/features/update/update.component.scss‎

Copy file name to clipboardExpand all lines: adev/src/app/features/update/update.component.scss

+1Lines changed: 1 addition & 0 deletions

Original file line number	Diff line number	Diff line change
@@ -65,6 +65,7 @@ h4 {
65	65	transform: translateY(-0.7rem);
66	66	max-height: 200px;
67	67	overflow-y: auto;
	68	+ overscroll-behavior: contain;
68	69	width: $ver-dropdown-width;
69	70	box-sizing: border-box;
70	71	background: var(--page-background);

0 commit comments

Comments

0 (0)