Fix double scrollbar issue in documentation site#15
Open
WuMingDao wants to merge 1 commit intocloudflare:mainfrom
Open
Fix double scrollbar issue in documentation site#15WuMingDao wants to merge 1 commit intocloudflare:mainfrom
WuMingDao wants to merge 1 commit intocloudflare:mainfrom
Conversation
Problem: The documentation site was displaying two vertical scrollbars on the right side, creating a confusing user experience where users could scroll using either scrollbar. Root Cause: There were two nested scrollable containers: 1. The body element had `overflow-y: scroll` (global.css:26) 2. The #main-content container had `overflow-y-auto` (MainLayout.astro:29) This created a double-scrolling scenario where both the body and the main content area could scroll independently. Solution: Changed body overflow from `overflow-y: scroll` to `overflow: hidden`, making #main-content the single source of scrolling for the entire application. Why This Approach: This follows the modern app-layout pattern where: - Fixed sidebar (SidebarNav) remains visible at all times - Fixed theme toggle stays in the top-right corner - Only the main content area scrolls - Consistent with modern web applications (VS Code, GitHub, etc.) This approach provides better UX by having a single, predictable scroll container while maintaining the fixed positioning of navigation elements. Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Problem:
The documentation site was displaying two vertical scrollbars on the right side, creating a confusing user experience where users could scroll using either scrollbar.
fix before:
fix after:
Root Cause:
There were two nested scrollable containers:
overflow-y: scroll(global.css:26)overflow-y-auto(MainLayout.astro:29)This created a double-scrolling scenario where both the body and the main content area could scroll independently.
Solution:
Changed body overflow from
overflow-y: scrolltooverflow: hidden, making #main-content the single source of scrolling for the entire application.Why This Approach:
This follows the modern app-layout pattern where:
This approach provides better UX by having a single, predictable scroll container while maintaining the fixed positioning of navigation elements.