fix(drawer): 自定义抽屉滚动条样式并阻止滚动穿透至外部页面#8
Conversation
There was a problem hiding this comment.
Pull request overview
Updates the drawer UI styling to visually distinguish the drawer’s scrollbar from the host page and to reduce scroll chaining (“scroll bleed-through”) from the drawer to the underlying page.
Changes:
- Add
overscroll-behavior: containto the drawer’s main scroll container. - Add custom WebKit scrollbar styling for
.ld-drawer-body(thumb/track/hover).
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| overflow: auto; | ||
| overscroll-behavior: contain; | ||
| } | ||
|
|
There was a problem hiding this comment.
overscroll-behavior is not inherited. Since there are other scrollable containers inside the drawer (e.g. .ld-drawer-settings-card also has overflow: auto), scroll chaining can still propagate to the outer page when the user wheels/touches at the top/bottom of those inner scrollers. Consider applying overscroll-behavior: contain (or overscroll-behavior-y) to each scrollable drawer container, or set it on a higher-level wrapper that actually scrolls in all modes.
| #ld-drawer-root .ld-drawer-body * { | |
| overscroll-behavior: contain; | |
| } |
| #ld-drawer-root .ld-drawer-body::-webkit-scrollbar { | ||
| width: 6px; | ||
| } | ||
|
|
||
| #ld-drawer-root .ld-drawer-body::-webkit-scrollbar-track { | ||
| background: transparent; | ||
| } | ||
|
|
||
| #ld-drawer-root .ld-drawer-body::-webkit-scrollbar-thumb { | ||
| background: color-mix(in srgb, var(--tertiary, #3b82f6) 40%, transparent); | ||
| border-radius: 999px; | ||
| } | ||
|
|
||
| #ld-drawer-root .ld-drawer-body::-webkit-scrollbar-thumb:hover { | ||
| background: color-mix(in srgb, var(--tertiary, #3b82f6) 64%, transparent); |
There was a problem hiding this comment.
Scrollbar styling here is WebKit-only (::-webkit-scrollbar*). This extension declares Gecko support in manifest.json, so Firefox users will not see the custom drawer scrollbar. If cross-browser consistency is desired, add the Gecko equivalents (e.g. scrollbar-width / scrollbar-color) on .ld-drawer-body so the drawer scrollbar is customized in Firefox too.
|
已合并到 main。补了一条对应回归用例 AGENT-CHROME-013，用于覆盖抽屉滚动到底后继续滚轮时外层页面不应跟着滚动的场景；同时补了 Firefox 的滚动条样式回退。 本次验证：
感谢贡献。 |
1、自定义抽屉内部滚动条样式区分l站原有滚动条
2、阻止抽屉内部滚动穿透至外部页面