- From: Robert Flack via GitHub <sysbot+gh@w3.org>
- Date: Tue, 21 Nov 2023 16:53:53 +0000
- To: public-css-archive@w3.org
I've updated the demo: https://flackr.github.io/web-demos/css-scroll-snap/nested/9187.html The demo html now has examples of all of: * Snap align header text only * Snap aligned sections * Snap aligned inner diagrams * Snap aligned slides with the degenerate case called out of gaps between them Also I've implemented snapping in javascript following the various strategies using the `scrollend` event as a trigger: 1. Native - uses the browser's native snapping 2. Avoid completely - Creates areas to implicitly snap before and after inner areas 3. Proportional to size - Similar to the above, but allows overlap with inner areas that are smaller than the viewport proportional to the gap they do not fill when snapped. This reduces the jumps when forcing snapping to these inner areas. 4. Join with inner ranges - This implements the proposal from @fantasai to effectively extend inner ranges by the outer content until the next snap area. All of the strategies provide a reasonable outcome, though there are some particularly interesting edge cases: * Strategies 2 and 3 create a situation where gaps between inner areas become snap targets (e.g. see the gaps between the slides), whereas strategy 4 completely avoids this. * Strategy 4 removes the snap when below inner areas which is unexpected when leaving / entering the final slide or when leaving / entering inner diagrams. I have not (yet) implemented a strategy which switches behavior based on the size / contentfulness of the area. While this could let us have a single behavior that provides the best of both ideas 2/3 and 4, if implemented poorly (e.g. join previous area if size is less than some size) it could lead to subtle differences in behavior on the same site based on screen size. Perhaps it's possible for us to detect when the gap between two inner areas has meaningful content which would avoid the degenerate behavior of strategies 2/3. -- GitHub Notification of comment by flackr Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/9187#issuecomment-1821300328 using your GitHub account -- Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Tuesday, 21 November 2023 16:53:55 UTC