[css-scroll-snap-1] Should include example from the demise of css-sticky-scrollbars

[SamB]

https://drafts.csswg.org/css-scroll-snap-1/#examples doesn't seem to have anything like the example in http://tabatkins.github.io/specs/css-sticky-scrollbars/#intro (used to demonstrate that we don't need a sticky scrollbars spec, because scroll snap can already do that).

Here, I'll just quote the relevant portion:

This spec has been superseded by other CSS technology. In particular, to implement a chatroom that "sticks" the scrollbar to the bottom of the scroller when you’re near the bottom, staying there if you add new messages to the bottom, but not messing with your scroll position when you’re scrolled elsewhere in the history, just use [css-scroll-snap-1]:

.message-container {
  scroll-snap-type: proximity;
}
.message-container::after {
  content: "";
  height: 0;
  overflow: hidden;
  display: block;
  scroll-snap-align: end;
}

This creates a single scroll snap area in the message container, aligned with the very bottom of the container. If you scroll "near" the bottom, you’ll snap to it; if you add more content to the message container (thus pushing the ::after further down), it’ll automatically re-snap to it (because scroll containers have to re-snap to the same scroll snap area if it still exists); if you are scrolled somewhere else in the history, it won’t do anything at all.

[majido]

Note that I think to have the css-sticky-scrollbar functionality implementation need to re-snap after layout changes.

As far as I am aware no implementation is doing so correctly despite it being in the specification. Here is a test page I created to show case this. Note that scroll-anchoring does emulate the re-snap behavior to some extent so I had to disable it to make the effect more pronounced. Testing this in Firefox and Chrome shows that no one is doing the correct thing yet.

Note that we are working toward implementing this in Blink (bug) but I cannot provide when that will land.

[tabatkins]

Yes, the resnap is def required per spec and needed to get the referenced behavior. (It's one of the reasons we have that requirement in the spec!)

[fantasai]

I had thought we intended it to be more easily solved by https://www.w3.org/TR/css-align-3/#overflow-scroll-position ...

Anyway, I added the example to the spec. Also a subheading for the section so it's easier to find.