Re: [csswg-drafts] [scroll-animations-1] View progress contain of a sticky positioned elements on the edges (#8298)

I was thinking about this a bit more and I think if we define the 0% of each range as the minimum scroll progress at which the corresponding range constraint is satisfied and 100% as the maximum scroll progress at which the corresponding range constraint is satisfied that it should work for most common use cases.

As an example, consider the following ([demo](https://jsbin.com/dugehem/edit?html,css,console,output)):
```html
<style>
.scroller {
  height: 500px;
  overflow: auto;
  border: 1px solid black;
}
.space {
  outline: 2px solid rgb(0, 0, 255, 0.5);
  height: 500px;
}
.sticky {
  outline: 2px solid rgb(255, 0, 0, 0.5);
  background: yellow;
  position: sticky;
  top: 0px;
  height: 50px;
  view-timeline: sticky;
}
</style>
<div class="scroller">
  <div class="space"></div>
  <div class="space">
    <div class="sticky">Subject</div>
  </div>
  <div class="space"></div>
</div>
```

The sticky element is unshifted until you scroll down to scrollTop = 500px, and then remains in that position until scrollTop = 950px at which point the sticky element is touching the bottom of its container.

The phases would be as follows:
* Cover goes from scrollTop = 0px where the subject is touching the scrollport edge to scrollTop = 1000px where due to its sticky offset the element is still touching the top of the scrollport.
* Enter goes from scrollTop = 0px to scrollTop = 50px as no sticky shift has applied yet.
* Exit goes from scrollTop = 500px (sticky is just starting to shifted) to scrollTop = 1000px
* Contain goes from scrollTop =  50px (fully in view) to scrollTop = 950px (last scroll offset at which subject is fully contained due to sticky offset).

-- 
GitHub Notification of comment by flackr
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/8298#issuecomment-1496029322 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Tuesday, 4 April 2023 14:01:39 UTC