DioxusLabs / DioxusLabs/taffy

Support `position: sticky` in Overflow::Scroll nodes

Open
#771 0 comments 1 reaction 0 assignees View on GitHub
Dominant language
Rust
Stars
3.6k
Forks
222
Avg merge
10h 41m
Merged PRs (30d)
40

Description

## What problem does this solve or what need does it fill?

Improve support for sticky elements inside scrollable elements so that floating headers, columns, etc. can be added to scrollable elements. Web example: https://codepen.io/neoky/pen/mGpaKN.

## What solution would you like?

Extracted from relevant discussion: https://github.com/DioxusLabs/taffy/discussions/770

@nicoburns
> > Technically it looks like i could store "stickiness" flag as metadata and I just shouldn't apply scroll offset to element and it would be drawn correctly. If this is all that is required, could taffy add position: sticky and add a flag to layout if it should be sticky?
>
> So I think the "correct" computation for `position: sticky` is a little more complicated than just not applying the scroll offset:
>
> 1. It should _conditionally_ not apply the scroll offset once the item would otherwise scroll out of view
>
> 2. The position at which the "sticky" position takes effect should be inset by the `top/left/bottom/right` styles.
>
> 3. There might need to be some kind of conflict resolution for over-constrained cases (e.g. container is smaller than sticky node or sticky node has both `bottom` and `top` set)
>
>
> But, as you have demonstrated:
>
> * (1) doesn't apply if the initial (static) position of the node is 0
>
> * (2) doesn't apply if the sticky position is 0
>
> * (3) doesn't apply if the container is big enough and only one property is each axis is set
>
>
> I don't think it makes sense to have `position: sticky` as part of the main layout phase in Taffy, because `position: sticky` is scroll position dependent, and you don't want to have to recompute layout every time the scroll position changes. But:
>
> * There could be a helper which computes the position given inputs (which would be called manually)
>
> * It could potentially be incorporated as part of a (new) phase that could:
>
> * Compute `position: sticky`
> * Apply `transform`
>
>
> I'd probably want to start with the former approach and move towards the latter once I/we are more sure how it needs to work.

## Additional context

For simple case `egui_taffy` implements simple `sticky` boolean flag for each dimension. Using this approach top, left floating content is possible, but right, bottom floating content is not.

https://github.com/user-attachments/assets/07546146-7a90-422b-b291-99b758fd7704

Contributor guide

Open the contributing guide

Research direction

Start by reading discussion #770 and the linked web example to understand the expected sticky behavior inside scrollable elements. Compare the proposed helper approach with the existing Overflow::Scroll behavior, including top, left, right, and bottom insets; done should include a defined position calculation and coverage for the stated edge cases.

Written by the indexing model from the issue text.

Assessment

Tech stack
rust
Domain
frontend
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
28/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.