Bramus (on vacation 🏝️) on Nostr: Today I saw this React hook (see photo) get shared on birdsite. It enables one to ...
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
Published at
2024-08-19 20:30:58 CESTEvent JSON
{
"id": "f46030e9cac2e5f7990a4a74465407de5f042a80a65b4514785cd10bc06e24f8",
"pubkey": "a1663dece1c904625f5d944b732463fc6a464449759466188be761bb947bb72d",
"created_at": 1724092258,
"kind": 1,
"tags": [
[
"proxy",
"https://front-end.social/@bramus/112990110232760267",
"web"
],
[
"imeta",
"url https://cdn.masto.host/frontendsocial/media_attachments/files/112/990/109/938/912/419/original/e2e794c18c839edd.jpeg",
"m image/jpeg"
],
[
"proxy",
"https://front-end.social/users/bramus/statuses/112990110232760267",
"activitypub"
],
[
"L",
"pink.momostr"
],
[
"l",
"pink.momostr.activitypub:https://front-end.social/users/bramus/statuses/112990110232760267",
"pink.momostr"
],
[
"-"
]
],
"content": "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”.\n\nWhile it might work, you could — and should — use this little bit of CSS instead:\n\n```\n.log {\n scroll-snap-type: y proximity;\n align-content: end;\n}\n.log::after {\n display: block;\n content: \"\";\n scroll-snap-align: end;\n}\n```\n\n“… remains snapped to the bottom …unless the user has scrolled away from that edge” — https://drafts.csswg.org/css-scroll-snap/#example-d0a2d86f\nhttps://cdn.masto.host/frontendsocial/media_attachments/files/112/990/109/938/912/419/original/e2e794c18c839edd.jpeg\n",
"sig": "be6b92d1f5e37a9a30d321279db062ae4f7b85bd54fbeacb824091aad4457adf858f759bcb4ee82d424d533bc67f122291c689f8cc59d73392e97e1b0a3c1f00"
}