Today I saw this React hook (see photo) get shared...

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

Like 19 August at 18:30 | Open on front-end.social

28 comments

Stuart Langridge

@bramus whoa. I had no idea this was possible! nice tip!

19 August at 19:00 | Open on mastodon.social

Ben

@bramus I wrote a hook for exactly this purpose and looking decently similar back in 2018 which is still in service. Pretty amazing to see it completely unnecessary now.

19 August at 20:54 | Open on macaw.social

Bramus

@sangster The web always catches up (eventually) 😊

19 August at 21:06 | Open on front-end.social

Ben

@bramus well technically mine also does data fetching for infinite scroll but it would be significantly simpler without the scroll behavior

19 August at 21:31 | Open on macaw.social

Casey

@bramus Never do with 4 lines of CSS what you could do with 150 lines of React

19 August at 21:01 | Open on indieweb.social

Bramus

@casey I should print and frame that 😅😂

19 August at 21:06 | Open on front-end.social

Martin 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!

20 August at 7:04 | Open on mastodon.social

hazel

@grooovinger @bramus </3 this makes swipe scrolling try to end up lining up with every message on iOS safari, it feels really weird

20 August at 10:11 | Open on social.besties.house

hazel

@grooovinger @bramus with and without this scroll snapping. Hoping this is a problem that could be fixed with more CSS?

20 August at 10:19 | Open on social.besties.house

Martin Grubinger

@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?

20 August at 11:14 | Open on mastodon.social

hazel

@grooovinger iOS 18 beta 5

20 August at 11:17 | Open on social.besties.house

Nicolas Hoizey

@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?

20 August at 12:54 | Open on mamot.fr

chfkch :nixos: :rust:

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

#codepen #css

20 August at 13:20 | Open on ruhr.social

Martin Grubinger

@chfkch @bramus apparently it's not supported by firefox yet.

20 August at 14:35 | Open on mastodon.social

Bramus

@grooovinger @chfkch Yeah, noticed that too … filing a bug as that should actually work.

20 August at 17:49 | Open on front-end.social

Bramus

@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`.

21 August at 13:21 | Open on front-end.social

Amadeus Maximilian

@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. 😅

20 August at 18:32 | Open on mastodon.design

Martin Grubinger

@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.

21 August at 15:26 | Open on mastodon.social

yshtolafucker926

@bramus this is why I don't like react. they don't know about REAL web design (static html files with crazy css and MAYBE some js)

20 August at 10:21 | Open on kill-corporations.enterprises

meduz'

@bramus Ha, I discovered this trick this week-end while attempting to have a scroll container initialised with scroll end without JS, but then I haven’t found a way to “unlock” the scroll without JS.

20 August at 11:55 | Open on m.nintendojo.fr

Vesa Piittinen

@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

20 August at 17:37 | Open on mastodon.social

Bramus

@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