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 threadMartin Grubinger

@bramus I had no idea this was possible but was curious how it works, so I made a quick #codepen of this idea: https://codepen.io/mgrubinger/pen/LYKQaQz

I love how simple (and reliable) this #css solution is!

Stay at Bottom of Appending List using CSS Scroll Snapping

...

Aug 20, 2024 at 7:04amPhanpy
Show threadHazel CoraAug 20, 2024
@grooovinger @bramus </3 this makes swipe scrolling try to end up lining up with every message on iOS safari, it feels really weird
Show threadHazel CoraAug 20, 2024
@grooovinger @bramus with and without this scroll snapping. Hoping this is a problem that could be fixed with more CSS?
Show threadMartin GrubingerAug 20, 2024
@h I fixed the width, but I can't reproduce the strange behaviour (no iPhone around at the moment, simulator looks fine). Which iOS/Safari version are you on?
Show threadHazel CoraAug 20, 2024
@grooovinger iOS 18 beta 5
Show threadNicolas HoizeyAug 20, 2024

@grooovinger @bramus it doesn't seem to work in Firefox unfortunately.

Based on Can I Use, `scroll-snap-type` and `scroll-snap-align` are supported, but maybe not these values?

Show threadchfkch  Aug 20, 2024

@grooovinger
Hhm it seems it does not work with my Android Firefox.
@bramus

#codepen #css

Show threadMartin GrubingerAug 20, 2024
@chfkch @bramus apparently it's not supported by firefox yet.
Show threadBramusAug 20, 2024
@grooovinger @chfkch Yeah, noticed that too … filing a bug as that should actually work.
Show threadBramusAug 21, 2024

@grooovinger @chfkch Bug Report: https://bugzilla.mozilla.org/show_bug.cgi?id=1914178

Workaround: instead of snapping generated content, you can snap the `:last-child`.

1914178 - scroll-snap not working on generated content

UNCONFIRMED (nobody) in Core - Layout: Scrolling and Overflow. Last updated 2024-08-21.

Show threadAmadeus MaximilianAug 20, 2024

@grooovinger @bramus as cool as this is, I think this also breaks inertia scroll on iOS. 🤔 Thanks for building it though, I was curious to implement it myself when I tread the original Toot. 😊

I feel like I’ve read about a similar solution using overflow-anchor somewhere, but I might be mistaken, since that property doesn’t do what I thought it did. 😅

Show threadMartin GrubingerAug 21, 2024
@amxmln I tested it today on a real iOS device. Can confirm that inertia is not the same as without snapping, which I guess makes sense but is still a bit disappointing. Hopefully I'll get around to play with the pen a bit more, maybe this can be fixed.