BramusAug 19, 2024

Today I saw this React hook (see photo) get shared on birdsite. It enables one to “automatically scroll down when new messages arrive in a chat”.

While it might work, you could — and should — use this little bit of CSS instead:

```
.log {
scroll-snap-type: y proximity;
align-content: end;
}
.log::after {
display: block;
content: "";
scroll-snap-align: end;
}
```

“… remains snapped to the bottom …unless the user has scrolled away from that edge” — https://drafts.csswg.org/css-scroll-snap/#example-d0a2d86f

CSS Scroll Snap Module Level 1

Show threadVesa PiittinenAug 20, 2024

@bramus There is also `overflow-anchor` as covered at CSS Tricks: https://css-tricks.com/books/greatest-css-tricks/pin-scrolling-to-bottom/

Here is a pen I made combining with another #CSS only trick to start the scroll from bottom with zero JavaScript:

https://codepen.io/Merri/pen/BagrowG

Pin Scrolling To Bottom - CSS-Tricks

In perhaps in the top 5 most annoying things a website can do is this. You're trying to read something (or click something!) and all the sudden the page shift underneath you (or you mis-click!). There is a CSS property that can help fix that. Plus, we can exploit it to do something that was previously exclusively in the realm of JavaScript.

CSS-Tricks
Show threadBramus

@MerriNet Checked this in detail and while it does work, it doesn’t seem to play nice in situations where the scroller goes from non-overflowing to an overflowing state (which could be considered a bug).

Also a pity that it requires an element (or generated content) that actually takes up space (i.e. `min-height: 1px`).

And finally no Safari support for this, unfortunately :-(

https://codepen.io/bramus/pen/GRbxOPX/f6627102553f568a71fec831498b2d6b

Stay at Bottom of Appending List using CSS Scroll Snapping (overflow-anchor version)

...

Aug 21, 2024 at 1:39pmWeb
Show threadVesa PiittinenAug 21, 2024

@bramus Interesting, my pen works in Safari. So I tested a bit and `display: flex;` is what breaks it in Safari.

I don't have time to check if there is a bug report for Safari on this.

Show threadBramusAug 21, 2024
@MerriNet Oh, I think we may be talking about two things here. Was talking about `overflow-anchor` which I used in that last demo I linked to.
Show threadVesa PiittinenAug 21, 2024
@bramus I'm talking about that. It works (stays in bottom also in Safari) once you remove `display: flex;` on the `#list` element.