A page can appear to hold the same card steady after late content loads even though two browser mechanisms are relevant. Scroll anchoring follows a selected anchor node; scroll snap re-evaluates the previously snapped target after layout changes.
This guide traces one 120-pixel insertion through scroller identity, anchor selection, snap state, suppression, target survival, nested scrollers and changed logical axes.
The examples are reduced teaching cases. Browser behaviour should be verified in the target engines, input modes and accessibility settings.
The practical habit is to keep a small evidence receipt beside every answer. It names the object, reference condition, observation method, transformation and the nearest tempting claim that still does not follow.
Each changed-context check alters one consequential condition while the remaining basis stays fixed. This makes transfer visible: the reader can predict which field should change, which should remain stable and what new evidence would be required.
The article uses five routes so readers can enter by task, but the mechanism is cumulative. Definitions establish the objects, the worked case carries the arithmetic, evidence checks test rivals, transfer cases change the context and the final route repairs common shortcuts.
A useful comparison begins with a ledger rather than a conclusion. Put the two candidate quantities in separate columns, write the reference and observation rule for each, and leave an explicit blank when a field is unknown. A later correction can then change one field without silently changing the claim.
Keep three layers visible: what was directly observed, what was calculated or selected by a rule, and what action or interpretation is proposed. Evidence for the first two layers does not automatically justify the third. A careful report names the nearest rival explanation and one check that would distinguish it.
Before leaving the worked route, confirm that units and coordinates close, every derived value points back to a stored input and every linked article answers a materially different question. Read the conclusion alone. If it sounds universal, add the missing condition directly to the sentence.
This specialist guide belongs to the Websites root. It also connects to The Gold Standard of Education | Learning That Transfers into Life and the How X Works hub. The worked cases are original teaching examples; their numbers are stipulated so that the reasoning can be checked.
eduKateSG · Websites
Find your next learning step
Read the short answer first: store the selected anchor node and the snapped target separately. After layout changes, anchoring proposes stability and re-snapping preserves an eligible snap position; in a snapped container the anchoring correction is limited to what re-snapping allows.
ROUTE 1 · CHAPTERS 1–4
Define the quantities
Name the quantities, reference conditions and reporting rules.
ROUTE 3 · CHAPTERS 9–12
Audit the evidence
Check instruments, algorithms, assumptions and rival explanations.
ROUTE 5 · CHAPTERS 17–20
Report and continue
Repair shortcuts, answer questions and follow verified routes.
Chapter contents
Define the quantities · Chapters 1–4
1. Name the two scroll corrections
2. Identify the scrolling box first
Work the mechanism · Chapters 5–8
5. Work the central 120-pixel insertion
Audit the evidence · Chapters 9–12
9. Audit the suppression window
10. Audit overflow-anchor exclusions
Transfer the reasoning · Chapters 13–16
13. Transfer to a deleted snap target
14. Transfer to nested scrollers
Report and continue · Chapters 17–20
17. Repair the single-algorithm shortcut
18. Build a minimal diagnostic matrix
Scroll anchoring attempts to keep a chosen anchor node visually stable when layout changes move content. Scroll snap re-evaluates a previously snapped scroll container after layout changes and may return it to the same surviving snap position. They can act on the same scroll offset for different reasons.
Write the evidence in the order a reader can audit: the Websites quantity, its reference object, the observation or browser rule, the transformation, and the decision being made. Keeping those fields visible prevents a familiar label from hiding a changed basis.
A fictional vertical scroller is snapped to card C. A late image above C grows by 120 px. Anchoring would propose a 120 px offset adjustment to keep the anchor stable; snap re-evaluation asks whether C remains the snapped target.
First-principles test: ask what physical, observational or algorithmic operation produces each value in this chapter. Then ask whether the second value could change while the first stays fixed. If it can, the two labels are not substitutes. For Websites, this counterfactual is often clearer than a definition learned in isolation.
Remove scroll snapping while leaving the image insertion unchanged. The anchoring question survives and the re-snap question disappears.
Evidence check: another reader should be able to reproduce the narrow result from the stored definitions, inputs and intermediate steps, then identify the nearest stronger claim that the evidence does not support.
Browser conformance and observable timing must be checked in target engines; the article does not promise identical animation details.
Both mechanisms operate per scrolling box. The document viewport, an overflow panel and a nested carousel can each have their own scroll offset, anchor candidate and snap state. A declaration on the wrong scroller cannot explain the observed movement.
Trace the mechanism before interpreting the result. For Websites, mark which value belongs to the source, which belongs to the measurement or layout algorithm, and which is a reported summary. A calculation is useful only when those roles remain attached.
The page contains an overflow:auto feed inside the document. Insert content above the feed but outside it: the document may move while the feed offset and snapped card remain unchanged.
Practical transfer: build two records that share the headline number but differ in the condition discussed here. If the correct interpretation changes, the omitted condition is decision-relevant and belongs in the report. This test turns a vocabulary distinction into a reusable Websites checking habit.
Move the insertion inside the feed before card C. Predict that the feed geometry now changes even if the document offset stays fixed.
Practical check: keep one counterexample beside the worked case. If the wording fails when that one condition changes, narrow the sentence until it describes only the evidence actually in hand.
Devtools labels and platform scrollbars are observations, not substitutes for tracing which element actually scrolls.
A useful receipt stores the pre-change scroll offset, viewport or scrollport size, selected anchor node, snapped target, snap alignment and the target rectangles. Without that baseline, a final screenshot cannot reveal which correction occurred.
Use a compact decision table with columns for condition, input, operation, result and limit. This makes the comparison reproducible and exposes where a missing field would force an assumption instead of an observation.
Before mutation, store scrollTop 800 px, card C start at 880 px, anchor text at 920 px and snapport start at 80 px. The target and anchor appear 80 px and 120 px below the scrollport start.
Misconception check: a plausible output does not prove the right reference, denominator, ancestor, spectrum or observation rule was used. Reconstruct one intermediate step and one changed-context prediction. If either cannot be stated, keep the result provisional rather than strengthening its wording.
Keep the final screenshot identical but delete the baseline. The mechanism becomes underdetermined even though the image looks correct.
Transfer check: repeat the reasoning with one consequential condition changed while holding the rest fixed. State what changes, what stays comparable and why the original label alone was insufficient.
Instrumentation can perturb timing; use minimal logging and repeat the case.
Scroll anchoring prefers eligible content near the block-start edge of the optimal viewing region and excludes clipped or disqualified subtrees. The chosen node need not be the snapped element.
Preserve the raw inputs beside the derived result. If a later reader changes one condition, the original Websites reasoning should still be recoverable without reverse-engineering a rounded headline or an unlabeled screenshot.
Card C is snapped, but a paragraph inside it near the optimal region becomes the anchor node. Store both identities instead of writing “the card is the anchor.”
Evidence design: retain both a positive case and a near-miss. The positive case shows when the rule applies; the near-miss changes one consequential condition and shows when the conclusion fails. Together they teach the boundary of the Websites mechanism better than another unlabelled example.
Set overflow-anchor:none on the paragraph subtree. Predict that selection moves or that no useful candidate remains.
Audit check: retain the source version, units, settings, exclusions and rounding rule. A future correction should be able to alter one field without rebuilding the entire explanation from memory.
Selection is user-agent work defined by the specification; authors cannot directly nominate an arbitrary node as the anchor.
In the central case card C and its paragraph shift down 120 px after an unsized image above resolves. Anchoring computes the anchor movement; snap re-evaluation tests the surviving C snap position. The same numerical correction can satisfy both constraints.
Ask what would have to stay fixed for the comparison to be fair. Record those controls explicitly, then name the first uncontrolled condition that could reverse the conclusion. This is the practical transfer step, not an optional footnote.
Pre-change scrollTop is 800. Geometry shifts by +120. A final scrollTop of 920 keeps the paragraph and C alignment stable. Record “compatible result” rather than claiming the final number identifies one algorithm.
Communication test: replace any sentence that says two things are “the same” or “different” with a sentence naming the operation, reference condition and supported consequence. The extra words are useful when they let a future reader repeat the decision without access to the original author.
Change the snapped target to a deleted card while preserving the 120 px insertion. Anchoring can still propose stability, while re-snapping no longer has the same target to preserve.
Decision check: end with an action or interpretation that follows from the stated conditions, followed by a boundary sentence explaining when a specialist rule, local procedure or additional measurement is needed.
The teaching geometry omits subpixel rounding, asynchronous painting and platform controls.
For a selected anchor node, the adjustment follows its block-start movement relative to the scrolling content. If the prior offset is y0 and the new offset is y1, the queued correction uses y1 minus y0 unless suppressed.
Write the evidence in the order a reader can audit: the Websites quantity, its reference object, the observation or browser rule, the transformation, and the decision being made. Keeping those fields visible prevents a familiar label from hiding a changed basis.
The paragraph edge moves from content coordinate 920 to 1040, so delta is +120 px. Adding that to scrollTop keeps its viewport position unchanged.
First-principles test: ask what physical, observational or algorithmic operation produces each value in this chapter. Then ask whether the second value could change while the first stays fixed. If it can, the two labels are not substitutes. For Websites, this counterfactual is often clearer than a definition learned in isolation.
Move the paragraph upward by 40 px instead. Predict a -40 px correction rather than reusing the sign from the first case.
Evidence check: another reader should be able to reproduce the narrow result from the stored definitions, inputs and intermediate steps, then identify the nearest stronger claim that the evidence does not support.
Transforms, fragmented boxes and writing modes require the specification’s geometry rather than a guessed top value.
When layout changes and the same previously snapped position still exists, the scroll container is re-snapped to that position. If several boxes were snapped and no focus or target disambiguates them, selection can be user-agent defined.
Trace the mechanism before interpreting the result. For Websites, mark which value belongs to the source, which belongs to the measurement or layout algorithm, and which is a reported summary. A calculation is useful only when those roles remain attached.
Card C survives and its start snap position moves from 880 to 1000 content pixels. Re-snapping can restore C at the snapport start by changing scrollTop from 800 to 920.
Practical transfer: build two records that share the headline number but differ in the condition discussed here. If the correct interpretation changes, the omitted condition is decision-relevant and belongs in the report. This test turns a vocabulary distinction into a reusable Websites checking habit.
Give keyboard focus to a different one of two formerly coincident targets. Predict that the focused target can control the new snap choice.
Practical check: keep one counterexample beside the worked case. If the wording fails when that one condition changes, narrow the sentence until it describes only the evidence actually in hand.
Animation to the same box is user-agent defined; do not infer the mechanism from smoothness alone.
The anchoring specification limits anchoring adjustments for a currently snapped container to adjustments allowed by re-snapping. Snap is therefore not merely a later decorative effect; it constrains which anchoring correction is permitted.
Use a compact decision table with columns for condition, input, operation, result and limit. This makes the comparison reproducible and exposes where a missing field would force an assumption instead of an observation.
An anchor proposal of +90 px would leave the container between mandatory snap positions. Record why the allowable correction must respect the snap result.
Misconception check: a plausible output does not prove the right reference, denominator, ancestor, spectrum or observation rule was used. Reconstruct one intermediate step and one changed-context prediction. If either cannot be stated, keep the result provisional rather than strengthening its wording.
Change scroll-snap-type from mandatory to none before mutation. The snap constraint no longer governs the anchoring proposal.
Transfer check: repeat the reasoning with one consequential condition changed while holding the rest fixed. State what changes, what stays comparable and why the original label alone was insufficient.
Exact event-loop and rendering order is complex; teach the constraint relationship rather than an invented universal sequence.
Anchor movement queues an adjustment until the suppression window ends. Certain style changes or a zero scroll offset can suppress it, so visible layout movement does not guarantee an anchoring correction.
Preserve the raw inputs beside the derived result. If a later reader changes one condition, the original Websites reasoning should still be recoverable without reverse-engineering a rounded headline or an unlabeled screenshot.
During the same window, a script changes the anchor path’s height. Mark the 120 px proposal as suppressed under the stated trigger instead of expecting compensation.
Evidence design: retain both a positive case and a near-miss. The positive case shows when the rule applies; the near-miss changes one consequential condition and shows when the conclusion fails. Together they teach the boundary of the Websites mechanism better than another unlabelled example.
Delay the style change to a later task. The first adjustment may now execute before the second mutation.
Audit check: retain the source version, units, settings, exclusions and rounding rule. A future correction should be able to alter one field without rebuilding the entire explanation from memory.
Timing tests require repeatable reduced cases; console timestamps alone may not locate every rendering step.
overflow-anchor:none excludes an element and its descendants from candidate selection. It does not disable scroll snap and it does not promise that every visual shift will remain uncompensated if another candidate is eligible.
Ask what would have to stay fixed for the comparison to be fair. Record those controls explicitly, then name the first uncontrolled condition that could reverse the conclusion. This is the practical transfer step, not an optional footnote.
Exclude an advertising slot subtree above C. A paragraph in C can still become the anchor while C remains the snapped target.
Communication test: replace any sentence that says two things are “the same” or “different” with a sentence naming the operation, reference condition and supported consequence. The extra words are useful when they let a future reader repeat the decision without access to the original author.
Put overflow-anchor:none on the scroller’s entire content wrapper. Predict that anchoring candidates disappear while snap rules remain.
Decision check: end with an action or interpretation that follows from the stated conditions, followed by a boundary sentence explaining when a specialist rule, local procedure or additional measurement is needed.
Use exclusions sparingly; broad opt-outs can make unrelated late content shifts visible.
Programmatic or user scrolling can create suppression conditions or new snap states. A script calling scrollTo near the mutation can therefore change the evidence, even when the final offset resembles the automatic result.
Write the evidence in the order a reader can audit: the Websites quantity, its reference object, the observation or browser rule, the transformation, and the decision being made. Keeping those fields visible prevents a familiar label from hiding a changed basis.
Log a scrollTo(0,920) call during image load. The final 920 px offset is now compatible with script, anchoring and re-snap; remove the call before attributing cause.
First-principles test: ask what physical, observational or algorithmic operation produces each value in this chapter. Then ask whether the second value could change while the first stays fixed. If it can, the two labels are not substitutes. For Websites, this counterfactual is often clearer than a definition learned in isolation.
Keep the call but disable both CSS features. If the offset remains, the automatic algorithms were not necessary for that observation.
Evidence check: another reader should be able to reproduce the narrow result from the stored definitions, inputs and intermediate steps, then identify the nearest stronger claim that the evidence does not support.
Browser APIs and scroll-behavior can schedule motion differently; test settled positions and event traces.
CHAPTER 12 OF 20 · Audit the evidence
12. Audit late images, fonts and disclosure panels
Unsized media, web-font metric changes and expanding details can all move content. The mechanism depends on which boxes change and whether the snapped target survives, not on the resource label.
Trace the mechanism before interpreting the result. For Websites, mark which value belongs to the source, which belongs to the measurement or layout algorithm, and which is a reported summary. A calculation is useful only when those roles remain attached.
Run three mutations that each add 120 px above C. Preserve separate receipts because a font change may also alter the anchor subtree while an image changes an earlier sibling.
Practical transfer: build two records that share the headline number but differ in the condition discussed here. If the correct interpretation changes, the omitted condition is decision-relevant and belongs in the report. This test turns a vocabulary distinction into a reusable Websites checking habit.
Reserve the image aspect ratio. The image case loses its geometry shift while the other two remain.
Practical check: keep one counterexample beside the worked case. If the wording fails when that one condition changes, narrow the sentence until it describes only the evidence actually in hand.
Layout stability is best improved by reserving space; scroll correction is not a licence to ship avoidable shifts.
If the old snapped element is removed, the promise to return to that same snap position cannot apply. The browser must evaluate remaining positions, focus and target state, while anchoring may use another eligible node.
Use a compact decision table with columns for condition, input, operation, result and limit. This makes the comparison reproducible and exposes where a missing field would force an assumption instead of an observation.
Delete C and leave D 300 px below. Record which element is focused, which anchor is selected and whether the final snap chooses D.
Misconception check: a plausible output does not prove the right reference, denominator, ancestor, spectrum or observation rule was used. Reconstruct one intermediate step and one changed-context prediction. If either cannot be stated, keep the result provisional rather than strengthening its wording.
Keep C in the DOM but resize it. The same-target rule becomes available again, producing a different transfer result.
Transfer check: repeat the reasoning with one consequential condition changed while holding the rest fixed. State what changes, what stays comparable and why the original label alone was insufficient.
When several outcomes are user-agent defined, report observed engines instead of presenting one as normative.
A mutation in an inner carousel can alter its own scroll geometry and also change the height of an outer feed. Each scroller can perform its own anchoring and snap analysis.
Preserve the raw inputs beside the derived result. If a later reader changes one condition, the original Websites reasoning should still be recoverable without reverse-engineering a rounded headline or an unlabeled screenshot.
The carousel gains a caption, moving outer content by 60 px while its horizontal snapped slide shifts by 40 px. Store two axes and two offset receipts.
Evidence design: retain both a positive case and a near-miss. The positive case shows when the rule applies; the near-miss changes one consequential condition and shows when the conclusion fails. Together they teach the boundary of the Websites mechanism better than another unlabelled example.
Fix the carousel height. The outer 60 px movement disappears while inner horizontal re-snapping can remain.
Audit check: retain the source version, units, settings, exclusions and rounding rule. A future correction should be able to alter one field without rebuilding the entire explanation from memory.
Do not add vertical and horizontal offsets as one scalar “page jump.”
CHAPTER 15 OF 20 · Transfer the reasoning
15. Transfer to logical axes and transforms
Anchoring follows the block flow direction, while scroll snap alignment uses logical axes and transformed boxes. Vertical writing or a transform can make physical top/left intuition fail.
Ask what would have to stay fixed for the comparison to be fair. Record those controls explicitly, then name the first uncontrolled condition that could reverse the conclusion. This is the practical transfer step, not an optional footnote.
Switch the example to vertical-rl and inline snapping. Rename coordinates block and inline before recomputing the rectangles.
Communication test: replace any sentence that says two things are “the same” or “different” with a sentence naming the operation, reference condition and supported consequence. The extra words are useful when they let a future reader repeat the decision without access to the original author.
Keep writing mode fixed and rotate only the target. Predict changed snap geometry without claiming that the document’s block direction changed.
Decision check: end with an action or interpretation that follows from the stated conditions, followed by a boundary sentence explaining when a specialist rule, local procedure or additional measurement is needed.
Reduced examples should expose computed writing mode and transforms; screenshots can hide the coordinate system.
CHAPTER 16 OF 20 · Transfer the reasoning
16. Transfer to fragment and focus navigation
A fragment link or focus movement can establish a targeted element and initiate scrolling. Subsequent layout change may preserve that target through re-snapping while anchoring tries to stabilise nearby content.
Write the evidence in the order a reader can audit: the Websites quantity, its reference object, the observation or browser rule, the transformation, and the decision being made. Keeping those fields visible prevents a familiar label from hiding a changed basis.
Navigate to #card-c, then load the 120 px image. Record target, focus, snapped box and selected anchor as four fields.
First-principles test: ask what physical, observational or algorithmic operation produces each value in this chapter. Then ask whether the second value could change while the first stays fixed. If it can, the two labels are not substitutes. For Websites, this counterfactual is often clearer than a definition learned in isolation.
Move focus to an input in card D without changing the URL target. The preferred re-snap choice may change when formerly coincident boxes separate.
Evidence check: another reader should be able to reproduce the narrow result from the stored definitions, inputs and intermediate steps, then identify the nearest stronger claim that the evidence does not support.
Keyboard and assistive-technology tests are required; a pointer-only demonstration is incomplete.
A final offset that keeps content steady does not prove scroll anchoring acted alone. In a snapped container, the allowed anchoring adjustment and the re-snap destination can coincide.
Trace the mechanism before interpreting the result. For Websites, mark which value belongs to the source, which belongs to the measurement or layout algorithm, and which is a reported summary. A calculation is useful only when those roles remain attached.
Rewrite “scroll anchoring moved the page 120 px” as “after a 120 px layout shift, the snapped scroller settled 120 px later; anchoring and same-target re-snap were both applicable.”
Practical transfer: build two records that share the headline number but differ in the condition discussed here. If the correct interpretation changes, the omitted condition is decision-relevant and belongs in the report. This test turns a vocabulary distinction into a reusable Websites checking habit.
Disable one feature at a time and compare geometry and events. Similar results still do not make their definitions identical.
Practical check: keep one counterexample beside the worked case. If the wording fails when that one condition changes, narrow the sentence until it describes only the evidence actually in hand.
Attribution may remain conditional when browser internals are not exposed.
A useful test crosses anchoring on/off, snapping on/off, target survives/deleted and mutation above/inside target. Each run stores initial and final geometry rather than only a video.
Use a compact decision table with columns for condition, input, operation, result and limit. This makes the comparison reproducible and exposes where a missing field would force an assumption instead of an observation.
Create eight small rows and predict the outcome before running them. A disagreement identifies which assumption needs repair.
Misconception check: a plausible output does not prove the right reference, denominator, ancestor, spectrum or observation rule was used. Reconstruct one intermediate step and one changed-context prediction. If either cannot be stated, keep the result provisional rather than strengthening its wording.
Add a programmatic scroll only after the automatic matrix is understood.
Transfer check: repeat the reasoning with one consequential condition changed while holding the rest fixed. State what changes, what stays comparable and why the original label alone was insufficient.
Feature support, browser flags and test harness timing belong in the record.
A defensible conclusion names the scroller, pre-change anchor and snap state, mutation, suppression evidence, target survival and final geometry. It distinguishes normative rules from observed animation.
Preserve the raw inputs beside the derived result. If a later reader changes one condition, the original Websites reasoning should still be recoverable without reverse-engineering a rounded headline or an unlabeled screenshot.
Write: “The feed was snapped to surviving card C; a 120 px insertion moved both C and its anchor paragraph; the settled +120 px offset satisfied same-target re-snap and was not uniquely attributable from the final frame.”
Evidence design: retain both a positive case and a near-miss. The positive case shows when the rule applies; the near-miss changes one consequential condition and shows when the conclusion fails. Together they teach the boundary of the Websites mechanism better than another unlabelled example.
Ask another reader which toggle or trace would narrow attribution. They should request a reduced feature matrix, not a larger screenshot.
Audit check: retain the source version, units, settings, exclusions and rounding rule. A future correction should be able to alter one field without rebuilding the entire explanation from memory.
The conclusion does not guarantee behaviour in untested engines or future drafts.
CHAPTER 20 OF 20 · Report and continue
20. Continue through verified website routes
Scroll anchoring versus CSS anchor positioning, scroll padding versus scroll margin and layout placeholders answer neighbouring but distinct questions. Group them by debugging task.
Ask what would have to stay fixed for the comparison to be fair. Record those controls explicitly, then name the first uncontrolled condition that could reverse the conclusion. This is the practical transfer step, not an optional footnote.
Use this article for post-layout scroll correction; use the anchor-positioning branch for authored positioned elements; use the snap-geometry branch for alignment regions.
Communication test: replace any sentence that says two things are “the same” or “different” with a sentence naming the operation, reference condition and supported consequence. The extra words are useful when they let a future reader repeat the decision without access to the original author.
Change the reader job to reserving off-screen size with contain-intrinsic-size and follow the dedicated route.
Decision check: end with an action or interpretation that follows from the stated conditions, followed by a boundary sentence explaining when a specialist rule, local procedure or additional measurement is needed.
Crosslinks support navigation; each sibling retains its own mechanism and limits.
Continue through the verified reading route
Scroll anchoring and CSS anchor positioning
Scroll anchoring and CSS anchor positioning. Use this when viewport stabilisation is being confused with authored anchor geometry.
Scroll padding and scroll margin
Scroll padding and scroll margin. Use this when the reader needs the snapport and snap-area alignment geometry.
Intrinsic content size and placeholders
Intrinsic content size and placeholders. Use this when layout space is being reserved before off-screen content is rendered.
Frequently asked questions
Can the final offset prove which mechanism acted?
No. Anchoring and same-target re-snapping can require the same correction; preserve the pre-change state and test features separately.
Does overflow-anchor:none disable scroll snap?
No. It changes anchoring eligibility; snap positions and re-snapping remain separate.
What if the snapped element is deleted?
The same-target preservation rule no longer applies, so remaining snap positions, focus and target state must be evaluated.
Authoritative sources and further reading
W3C CSS Scroll Anchoring Module Level 1. The specification defines anchor selection, scroll adjustments, suppression and the constraint imposed by scroll snapping.
W3C CSS Scroll Snap Module Level 1. The specification defines snap positions and re-snapping after content or layout changes.
W3C CSSOM View Module. The specification defines scrolling APIs, events and geometry used when instrumenting reduced cases.
Return to the Websites subject guide, The Gold Standard of Education, or the How X Works hub.