Summary

  • A reader's swipe can leave a gallery balanced between two photographs. The 2015 W3C draft described snap points; the working group then rebuilt the model around container choice, element alignment, and the portion of the screen that actually counts as the viewing frame.
  • The 2021 text also addresses what happens when content shifts after a photograph has snapped: if that same target survives, the browser must return to it. A gallery's parking space has to move with the picture.

The photographer has delivered twelve pictures. The editor lines them up for a phone screen, and the first reader swipes straight into the gap between two frames. A script could seize the gesture and march from picture to picture. The W3C's 2015 Scroll Snap Points draft tried a smaller intervention: mark offsets where the scroll container may rest after the finger or wheel stops. It offered repeated positions along an axis and positions supplied by elements. It also distinguished a compulsory stop from a nearby suggestion. That sounds tidy until the photos have different widths and the visible window has a header sitting over one edge. A numbered row of parking spaces does not explain whose bumper or which curb matters.

The working group's 2 December 2015 minutes show the repair while it was being made. Matt Rakow reported that area and alignment changes were being merged. The group recorded three concrete decisions: replace scroll-snap-destination with scroll-snap-padding, replace scroll-snap-coordinate with scroll-snap-align and a snap area, and add axis keywords on the container. Elika Etemad pushed to put the decisions on record so implementers had a direction even while details remained open. The album's stopping place was becoming a relationship between a picture and a usable viewing frame, rather than one magic coordinate in a long strip.

A later San Francisco working-group meeting exposes the awkward cases behind that relationship. The group resolved to make scroll-snap-align work like a subset of background positioning and called out boxes larger than the scrollport, targets outside the visible area, and snap areas that cannot be reached. It also added Etemad and Tab Atkins-Bittner as editors and changed the shortname from css-snappoints to css-scroll-snap. The name change was the least interesting part. A giant photograph may not fit the frame; a target can be geometrically aligned on paper while remaining useless to a person looking at the screen. The rules had to account for what could actually be seen and reached.

The June 2016 Working Draft put that division into CSS. The scroll container sets scroll-snap-type; each photo supplies scroll-snap-align against a snapport. The editor can ask for a centered picture, while the browser handles the motion. The draft's long-page example also gives proximity a real job: a reader must be able to stop halfway through a page instead of being hauled to the next section marker. mandatory is a choice about how strongly the page insists on its composition, not a universal improvement.

The viewing frame and the picture have separate knobs. In the 2018 Candidate Recommendation, scroll-padding changes the optimal region inside the container and scroll-margin changes the area attributed to the element. If a fixed header covers the top of the screen, adjusting the container's frame is different from giving one photograph extra room around its own edge. The same text makes programmatic scrolls such as scrollTo() subject to snapping, so a button that jumps the album cannot quietly use a second set of parking rules.

There is one more test that a static photo row hides. The page loads another image; widths and positions shift after the reader has settled on the third picture. The 2021 Candidate Recommendation says that if the same snapped target still exists after a content change, the container must re-snap to it. When several targets once coincided and no longer do, a focused or targeted element takes priority. The browser is following the picture, not worshipping the old pixel coordinate. scroll-padding and scroll-margin also matter for bringing an element into view when snapping is off: the frame's geometry outlived the original album trick.

The W3C publication history records the path from the 2015 point proposal through the 2016 redesign and the 2018 and 2021 Candidate Recommendation snapshots. The interesting result is a gallery that can survive more than one perfect swipe. It can handle a fixed header, an oversize picture, a scripted jump, and a late image without making the editor write a private physics engine. The reader moves the album; the browser finds the right frame and keeps the chosen picture in it.