It’s been several years since paying attention to the web platform was
a big part of my full time job, and I was curious if I’d missed any
interesting additions. I did some poking around with Claude and ended
up finding something neat, but a bit different than I was looking for:
scroll-snap-type.
Scrolling through long lists of things I’ve often been mildly
frustrated at how much precision I need. I want to move down a bit,
perhaps to see the next post in a feed, but without going a bit too
far and losing the first few lines. Looking through Claude’s output I
saw:
Scroll snap: Control scroll positioning with
scroll-snap-type (2019)
Looking on
MDN it seems to offer just what I was looking for: scrolling that
tries to avoid splitting content.
The main place on my website where I’ve wanted this are my pictures, and I’ve
implemented it there. Give it a try!
The code changes were really simple:
html, body {
scroll-snap-type: y proximity;
scroll-padding: 0;
}
figure {
scroll-snap-align: start;
}
While I didn’t see other things in Claude’s list of newish features
that seemed exciting, is there anything else neat I might have missed?
Scroll Snapping
Link post
It’s been several years since paying attention to the web platform was a big part of my full time job, and I was curious if I’d missed any interesting additions. I did some poking around with Claude and ended up finding something neat, but a bit different than I was looking for:
scroll-snap-type.Scrolling through long lists of things I’ve often been mildly frustrated at how much precision I need. I want to move down a bit, perhaps to see the next post in a feed, but without going a bit too far and losing the first few lines. Looking through Claude’s output I saw:
Looking on MDN it seems to offer just what I was looking for: scrolling that tries to avoid splitting content.
The main place on my website where I’ve wanted this are my pictures, and I’ve implemented it there. Give it a try!
The code changes were really simple:
html, body { scroll-snap-type: y proximity; scroll-padding: 0; } figure { scroll-snap-align: start; }While I didn’t see other things in Claude’s list of newish features that seemed exciting, is there anything else neat I might have missed?