Skip to content

Fade out the edges of ScrollAreas#8018

Merged
emilk merged 6 commits intomainfrom
emilk/scroll-fade
Mar 25, 2026
Merged

Fade out the edges of ScrollAreas#8018
emilk merged 6 commits intomainfrom
emilk/scroll-fade

Conversation

@emilk
Copy link
Copy Markdown
Owner

@emilk emilk commented Mar 25, 2026

Before:

image

It is very hard here to realize this is a scrollable area

After

image

The fade at the bottom tells the user they should try scrolling.

You can control it with style.spacing.scroll.fade

@emilk emilk added feature New feature or request style visuals and theming labels Mar 25, 2026
@github-actions
Copy link
Copy Markdown

github-actions bot commented Mar 25, 2026

Preview available at https://egui-pr-preview.github.io/pr/8018-emilkscroll-fade
Note that it might take a couple seconds for the update to show up after the preview_build workflow has completed.

View snapshot changes at kitdiff

@emilk emilk force-pushed the emilk/scroll-fade branch 2 times, most recently from 9c58b24 to cce52ab Compare March 25, 2026 10:44
@emilk emilk requested a review from lucasmerlin as a code owner March 25, 2026 10:44
@emilk emilk added egui and removed feature New feature or request labels Mar 25, 2026
return;
}

let bg = ui.visuals().panel_fill; // a bit iffy
Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we need a better way to solve this if we enable it by default

Copy link
Copy Markdown
Collaborator

@lucasmerlin lucasmerlin Mar 25, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe we could do this using UiStack? Frame could set a background color property there and we could read it in the scroll area? That feels fairly simple and relatively low overhead

Copy link
Copy Markdown
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice idea! I'll investigate that

Copy link
Copy Markdown
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We already have UiStackInfo::frame, which is set by Frame, so I think we have all we need

Copy link
Copy Markdown
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@emilk emilk force-pushed the emilk/scroll-fade branch from f2bdb70 to 7dff943 Compare March 25, 2026 11:42
@emilk emilk merged commit 0b0c561 into main Mar 25, 2026
46 checks passed
@emilk emilk deleted the emilk/scroll-fade branch March 25, 2026 11:53
emilk added a commit that referenced this pull request Mar 25, 2026
Masterchef365 pushed a commit to Masterchef365/egui that referenced this pull request Apr 3, 2026
## Before:
<img width="381" height="307" alt="image"
src="https://github.com/user-attachments/assets/0528ae2a-44bf-4d9e-89a4-c3f4ab438eb2"
/>

It is very hard here to realize this is a scrollable area

## After
<img width="383" height="310" alt="image"
src="https://github.com/user-attachments/assets/9e0ee6de-8b96-4e5c-a505-f57977010990"
/>

The fade at the bottom tells the user they should try scrolling.

You can turn if off with `style.spacing.scroll.fade.enabled`
Masterchef365 pushed a commit to Masterchef365/egui that referenced this pull request Apr 3, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

egui style visuals and theming

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants