mirror of
https://github.com/angular/angular.git
synced 2026-09-14 13:54:52 +08:00
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.
This commit is contained in:
@@ -171,6 +171,7 @@
|
||||
flex-direction: column;
|
||||
max-height: 12rem;
|
||||
overflow: auto;
|
||||
overscroll-behavior: contain;
|
||||
padding: 0.25rem;
|
||||
}
|
||||
|
||||
|
||||
@@ -11,6 +11,9 @@
|
||||
border-radius: 0.25rem;
|
||||
z-index: var(--z-index-mini-menu);
|
||||
box-shadow: 10px 4px 40px 0 rgba(0, 0, 0, 0.075);
|
||||
max-height: 70dvh;
|
||||
overflow-y: auto;
|
||||
overscroll-behavior: contain;
|
||||
|
||||
// Animation for mini-menu appearance
|
||||
animation: menuFadeIn 0.2s ease-out forwards;
|
||||
@@ -107,9 +110,6 @@
|
||||
}
|
||||
|
||||
.adev-version-picker {
|
||||
overflow-y: auto;
|
||||
overscroll-behavior: contain;
|
||||
max-height: 70dvh;
|
||||
margin-inline-start: 10px;
|
||||
|
||||
li {
|
||||
|
||||
@@ -6,6 +6,7 @@
|
||||
list-style: none;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
overscroll-behavior: contain;
|
||||
height: 100vh;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
||||
@@ -65,6 +65,7 @@ h4 {
|
||||
transform: translateY(-0.7rem);
|
||||
max-height: 200px;
|
||||
overflow-y: auto;
|
||||
overscroll-behavior: contain;
|
||||
width: $ver-dropdown-width;
|
||||
box-sizing: border-box;
|
||||
background: var(--page-background);
|
||||
|
||||
Reference in New Issue
Block a user