CSS Sticky Scrollbars

1. This Spec Has Been Superseded

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.

The use-case of "stable scrolling", where you want "whatever you’re currently looking at" to stay on the screen when things are added/removed/resized higher up in the scroll container, is handled by the Scroll Anchoring proposal currently making its way thru the standards process.