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?
I think messing with scroll is one of these things that even when you think it’s a good idea, it isn’t.
I actually find it really annoying, because if I scroll too little it snaps back to the previous picture, and too much it scrolls completely to the next one. There’s no ability to get it about where I want them refine iteratively.
Also, I think there’s a psychological thing where it feels nice where the UI feels like it reacts smoothly to what you do like a physical tool would. This breaks your control of the UI, snapping you out of this illusion, which is unpleasant.
Tried it. Hated it. If I scroll a little bit with a momentum-scrolling touchpad, then when it settles, it will sometimes move back to where it was, undoing my scroll. The second issue is that if I scroll with spacebar or pgup/pgdn, the animation is very slow (about 10x slower than it is for me on most pages).
I think there could be a version of this that’s good, where it subtly biases the deceleration curve of fling-scrolls to reach a good stopping point, but leaves every other scroll method alone. But this isn’t it.
What browser?
Chrome on MacOS.
Thanks! I played around with this and was able to get the same behavior, though it doesn’t happen with how I normally use the touchpad.
I think what I would want here is something where scroll-snap never undoes scrolling, and is generally lighter touch? Like, snapping to the target if you’ve made an ambiguous flick, but not fighting you.
The problem with this setting is that when I press the down arrow key, it scrolls the page by either a little bit (as normal) or a whole picture’s height, and it seems basically random which it does for any given down-arrow keypress. This is bad.