When a learner can reproduce a familiar example but a small variation causes confusion, the problem is usually an incomplete model rather than a lack of effort. The fastest useful response is to expose the hidden state and test one boundary at a time.
CSS overscroll-behavior controls what a user agent may do when a scroll container reaches its boundary. Mastery means distinguishing scroll chaining from scrolling itself, choosing auto, contain or none with an explicit boundary policy, applying the shorthand to the right axes and scrolling box, keeping it separate from overflow, touch-action and scroll snapping, testing nested containers with several input methods, and preserving keyboard, focus and browser-navigation usability instead of suppressing boundary behaviour by habit. This guide begins with that mechanism, then develops it through worked traces, deliberate mistakes, explained practice and transfer decisions.
The aim is independent reasoning. A learner should be able to predict behaviour, locate the earliest wrong assumption, use a safe diagnostic procedure and defend a design choice in a new project.
Punggol families can use the guide in short sessions around homework, CCAs and rest. The activities are proposed learning exercises, not claims about a physical branch, timetable, class size, fee, school relationship or guaranteed result.
Use disposable data and repositories, preserve backups, and check version-sensitive details against the official source. Current documentation settles a technical contract; observation and explanation turn that contract into usable knowledge.
Find your next learning step
Choose the route that matches the present difficulty. Use the complete index for a systematic course.
Build the model
Chapters 1-4 . Begin here, then continue after the learner can predict, verify and explain.
Use the core tools
Chapters 5-8 . Begin here, then continue after the learner can predict, verify and explain.
Handle boundaries
Chapters 9-12 . Begin here, then continue after the learner can predict, verify and explain.
Debug and verify
Chapters 13-16 . Begin here, then continue after the learner can predict, verify and explain.
Transfer with judgment
Chapters 17-20 . Begin here, then continue after the learner can predict, verify and explain.
Open the full chapter index . Jump to capstone practice . Use the How Studying Works hub . Read the official documentation
Complete chapter index
Chapters 1-4 . Build the model
Chapters 5-8 . Use the core tools
Chapters 9-12 . Handle boundaries
Chapters 13-16 . Debug and verify
Overscroll behaviour concerns an attempted continuation after a scroll container has reached the limit of its scroll range. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.
The high-value mistake in this chapter is applying the property to fix an element that never became scrollable. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. State the contract for Overscroll begins at a scroll boundary, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence.
For the Overscroll begins at a scroll boundary chapter on CSS overscroll-behavior, use a two-column trace during a short Punggol home session. On the left, write the predicted state for this exact mechanism before the tool runs. On the right, record the observation that bears on applying the property to fix an element that never became scrollable. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.
Core worked example
.panel { max-height: 20rem; overflow: auto; overscroll-behavior: contain; }Explained result. The panel first needs overflowing content; the property then governs boundary behaviour. Check the boundary as well as the happy path: ask what happens with an empty input, a duplicate or tied value, an unsupported type, a missing path, a NULL, or a second reference to the same object. Only the relevant boundary should be kept; the list is a prompt for judgment, not a demand to force every case into every example.
Four purposeful transfer cases
Case 1: revision drawer. Predict the rule using a long notes panel reaches its end without moving the page behind it. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “Overscroll behaviour concerns an attempted continuation after a scroll container has reached the limit of its scroll range.” Apply this procedure: State the contract for Overscroll begins at a scroll boundary, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: The panel first needs overflowing content; the property then governs boundary behaviour. For the revision drawer, add one near-miss that exposes applying the property to fix an element that never became scrollable. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 2: practice modal. Contrast the rule using answer feedback scrolls inside a dialog with deliberate boundary handling. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “Overscroll behaviour concerns an attempted continuation after a scroll container has reached the limit of its scroll range.” Apply this procedure: State the contract for Overscroll begins at a scroll boundary, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: The panel first needs overflowing content; the property then governs boundary behaviour. For the practice modal, add one near-miss that exposes applying the property to fix an element that never became scrollable. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 3: flashcard carousel. Stress-test the rule using horizontal swipes stay within a card strip at its first and last item. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “Overscroll behaviour concerns an attempted continuation after a scroll container has reached the limit of its scroll range.” Apply this procedure: State the contract for Overscroll begins at a scroll boundary, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: The panel first needs overflowing content; the property then governs boundary behaviour. For the flashcard carousel, add one near-miss that exposes applying the property to fix an element that never became scrollable. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 4: family timetable. Explain the rule using a short list proves that no boundary policy matters until the box can actually scroll. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “Overscroll behaviour concerns an attempted continuation after a scroll container has reached the limit of its scroll range.” Apply this procedure: State the contract for Overscroll begins at a scroll boundary, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: The panel first needs overflowing content; the property then governs boundary behaviour. For the family timetable, add one near-miss that exposes applying the property to fix an element that never became scrollable. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Diagnostic route
- Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
- Boundary check: create the smallest input that triggers applying the property to fix an element that never became scrollable.
- Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
- Repair check: use the reversible procedure “State the contract for Overscroll begins at a scroll boundary, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence.” and record the first changed observation.
- Transfer check: repeat the rule in a second context and identify what remains invariant.
A parent does not need to know the final CSS overscroll-behavior syntax. For this chapter, useful prompts are: “What did you expect from Overscroll begins at a scroll boundary?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing applying the property to fix an element that never became scrollable be made smaller?” The learner, not the parent, should supply the technical explanation.
Practice with an explained answer
Question. Build a tiny writing-mode lab with physical x and y axes are checked instead of guessed from inline direction. Include one ordinary case, one boundary and one deliberate failure caused by applying the property to fix an element that never became scrollable. Predict each result before using a tool, then report the first point where observation differs from prediction.
Answer guide. A strong response starts with the rule: Overscroll behaviour concerns an attempted continuation after a scroll container has reached the limit of its scroll range. It shows a trace, not only a final value. The ordinary case should demonstrate “The panel first needs overflowing content; the property then governs boundary behaviour.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: State the contract for Overscroll begins at a scroll boundary, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. Other data choices are valid when the evidence supports the same causal chain.
Decision and transfer
For Overscroll begins at a scroll boundary, separate the documented CSS overscroll-behavior mechanism from the project policy. State exactly what the technical contract guarantees, then state the project choice about validation, ordering, ownership, performance or recovery. Test whether the same distinction survives one transfer case, and keep stateful experiments disposable and backed up.
Previous chapter . Contents . Next chapter
By default, an input that cannot continue scrolling a descendant may scroll an ancestor in the same direction, a behaviour called scroll chaining. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.
The high-value mistake in this chapter is calling every page movement event bubbling. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. State the contract for Scroll chaining moves input to an ancestor, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence.
For the Scroll chaining moves input to an ancestor chapter on CSS overscroll-behavior, use a two-column trace during a short Punggol home session. On the left, write the predicted state for this exact mechanism before the tool runs. On the right, record the observation that bears on calling every page movement event bubbling. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.
Core worked example
.inner { overflow-y: auto; }Explained result. At the inner boundary, default policy can allow the outer page to consume the remaining scroll intention. Check the boundary as well as the happy path: ask what happens with an empty input, a duplicate or tied value, an unsupported type, a missing path, a NULL, or a second reference to the same object. Only the relevant boundary should be kept; the list is a prompt for judgment, not a demand to force every case into every example.
Four purposeful transfer cases
Case 1: flashcard carousel. Contrast the rule using horizontal swipes stay within a card strip at its first and last item. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “By default, an input that cannot continue scrolling a descendant may scroll an ancestor in the same direction, a behaviour called scroll chaining.” Apply this procedure: State the contract for Scroll chaining moves input to an ancestor, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: At the inner boundary, default policy can allow the outer page to consume the remaining scroll intention. For the flashcard carousel, add one near-miss that exposes calling every page movement event bubbling. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 2: family timetable. Stress-test the rule using a short list proves that no boundary policy matters until the box can actually scroll. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “By default, an input that cannot continue scrolling a descendant may scroll an ancestor in the same direction, a behaviour called scroll chaining.” Apply this procedure: State the contract for Scroll chaining moves input to an ancestor, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: At the inner boundary, default policy can allow the outer page to consume the remaining scroll intention. For the family timetable, add one near-miss that exposes calling every page movement event bubbling. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 3: mobile worksheet. Explain the rule using vertical pull gestures are compared under contain and none. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “By default, an input that cannot continue scrolling a descendant may scroll an ancestor in the same direction, a behaviour called scroll chaining.” Apply this procedure: State the contract for Scroll chaining moves input to an ancestor, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: At the inner boundary, default policy can allow the outer page to consume the remaining scroll intention. For the mobile worksheet, add one near-miss that exposes calling every page movement event bubbling. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 4: writing-mode lab. Transfer the rule using physical x and y axes are checked instead of guessed from inline direction. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “By default, an input that cannot continue scrolling a descendant may scroll an ancestor in the same direction, a behaviour called scroll chaining.” Apply this procedure: State the contract for Scroll chaining moves input to an ancestor, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: At the inner boundary, default policy can allow the outer page to consume the remaining scroll intention. For the writing-mode lab, add one near-miss that exposes calling every page movement event bubbling. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Diagnostic route
- Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
- Boundary check: create the smallest input that triggers calling every page movement event bubbling.
- Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
- Repair check: use the reversible procedure “State the contract for Scroll chaining moves input to an ancestor, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence.” and record the first changed observation.
- Transfer check: repeat the rule in a second context and identify what remains invariant.
A parent does not need to know the final CSS overscroll-behavior syntax. For this chapter, useful prompts are: “What did you expect from Scroll chaining moves input to an ancestor?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing calling every page movement event bubbling be made smaller?” The learner, not the parent, should supply the technical explanation.
Practice with an explained answer
Question. Build a tiny accessibility audit with keyboard focus, zoom and scrolling remain usable after containment. Include one ordinary case, one boundary and one deliberate failure caused by calling every page movement event bubbling. Predict each result before using a tool, then report the first point where observation differs from prediction.
Answer guide. A strong response starts with the rule: By default, an input that cannot continue scrolling a descendant may scroll an ancestor in the same direction, a behaviour called scroll chaining. It shows a trace, not only a final value. The ordinary case should demonstrate “At the inner boundary, default policy can allow the outer page to consume the remaining scroll intention.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: State the contract for Scroll chaining moves input to an ancestor, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. Other data choices are valid when the evidence supports the same causal chain.
Decision and transfer
For Scroll chaining moves input to an ancestor, separate the documented CSS overscroll-behavior mechanism from the project policy. State exactly what the technical contract guarantees, then state the project choice about validation, ordering, ownership, performance or recovery. Test whether the same distinction survives one transfer case, and keep stateful experiments disposable and backed up.
Previous chapter . Contents . Next chapter
The initial auto value permits ordinary scroll chaining and platform overscroll actions according to the user agent. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.
The high-value mistake in this chapter is treating auto as no scrolling. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. State the contract for auto preserves normal user-agent behaviour, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence.
For the auto preserves normal user-agent behaviour chapter on CSS overscroll-behavior, use a two-column trace during a short Punggol home session. On the left, write the predicted state for this exact mechanism before the tool runs. On the right, record the observation that bears on treating auto as no scrolling. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.
Core worked example
.panel { overscroll-behavior: auto; }Explained result. The browser retains its default boundary policy for both axes. Check the boundary as well as the happy path: ask what happens with an empty input, a duplicate or tied value, an unsupported type, a missing path, a NULL, or a second reference to the same object. Only the relevant boundary should be kept; the list is a prompt for judgment, not a demand to force every case into every example.
Four purposeful transfer cases
Case 1: mobile worksheet. Stress-test the rule using vertical pull gestures are compared under contain and none. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “The initial auto value permits ordinary scroll chaining and platform overscroll actions according to the user agent.” Apply this procedure: State the contract for auto preserves normal user-agent behaviour, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: The browser retains its default boundary policy for both axes. For the mobile worksheet, add one near-miss that exposes treating auto as no scrolling. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 2: writing-mode lab. Explain the rule using physical x and y axes are checked instead of guessed from inline direction. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “The initial auto value permits ordinary scroll chaining and platform overscroll actions according to the user agent.” Apply this procedure: State the contract for auto preserves normal user-agent behaviour, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: The browser retains its default boundary policy for both axes. For the writing-mode lab, add one near-miss that exposes treating auto as no scrolling. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 3: accessibility audit. Transfer the rule using keyboard focus, zoom and scrolling remain usable after containment. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “The initial auto value permits ordinary scroll chaining and platform overscroll actions according to the user agent.” Apply this procedure: State the contract for auto preserves normal user-agent behaviour, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: The browser retains its default boundary policy for both axes. For the accessibility audit, add one near-miss that exposes treating auto as no scrolling. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 4: API decision. Predict the rule using CSS boundary policy is compared with JavaScript gesture interception. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “The initial auto value permits ordinary scroll chaining and platform overscroll actions according to the user agent.” Apply this procedure: State the contract for auto preserves normal user-agent behaviour, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: The browser retains its default boundary policy for both axes. For the API decision, add one near-miss that exposes treating auto as no scrolling. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Diagnostic route
- Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
- Boundary check: create the smallest input that triggers treating auto as no scrolling.
- Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
- Repair check: use the reversible procedure “State the contract for auto preserves normal user-agent behaviour, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence.” and record the first changed observation.
- Transfer check: repeat the rule in a second context and identify what remains invariant.
A parent does not need to know the final CSS overscroll-behavior syntax. For this chapter, useful prompts are: “What did you expect from auto preserves normal user-agent behaviour?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing treating auto as no scrolling be made smaller?” The learner, not the parent, should supply the technical explanation.
Practice with an explained answer
Question. Build a tiny API decision with CSS boundary policy is compared with JavaScript gesture interception. Include one ordinary case, one boundary and one deliberate failure caused by treating auto as no scrolling. Predict each result before using a tool, then report the first point where observation differs from prediction.
Answer guide. A strong response starts with the rule: The initial auto value permits ordinary scroll chaining and platform overscroll actions according to the user agent. It shows a trace, not only a final value. The ordinary case should demonstrate “The browser retains its default boundary policy for both axes.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: State the contract for auto preserves normal user-agent behaviour, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. Other data choices are valid when the evidence supports the same causal chain.
Decision and transfer
For auto preserves normal user-agent behaviour, separate the documented CSS overscroll-behavior mechanism from the project policy. State exactly what the technical contract guarantees, then state the project choice about validation, ordering, ownership, performance or recovery. Test whether the same distinction survives one transfer case, and keep stateful experiments disposable and backed up.
Previous chapter . Contents . Next chapter
contain prevents scroll chaining outside the element while preserving local overscroll affordances that do not create navigation or refresh actions outside it. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.
The high-value mistake in this chapter is claiming contain removes every visual boundary effect. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. State the contract for contain stops boundary propagation, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence.
For the contain stops boundary propagation chapter on CSS overscroll-behavior, use a two-column trace during a short Punggol home session. On the left, write the predicted state for this exact mechanism before the tool runs. On the right, record the observation that bears on claiming contain removes every visual boundary effect. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.
Core worked example
.drawer { overflow-y:auto; overscroll-behavior-y:contain; }Explained result. Vertical boundary input stays with the drawer instead of scrolling an ancestor, while a local affordance may remain. Check the boundary as well as the happy path: ask what happens with an empty input, a duplicate or tied value, an unsupported type, a missing path, a NULL, or a second reference to the same object. Only the relevant boundary should be kept; the list is a prompt for judgment, not a demand to force every case into every example.
Four purposeful transfer cases
Case 1: accessibility audit. Explain the rule using keyboard focus, zoom and scrolling remain usable after containment. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “contain prevents scroll chaining outside the element while preserving local overscroll affordances that do not create navigation or refresh actions outside it.” Apply this procedure: State the contract for contain stops boundary propagation, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: Vertical boundary input stays with the drawer instead of scrolling an ancestor, while a local affordance may remain. For the accessibility audit, add one near-miss that exposes claiming contain removes every visual boundary effect. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 2: API decision. Transfer the rule using CSS boundary policy is compared with JavaScript gesture interception. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “contain prevents scroll chaining outside the element while preserving local overscroll affordances that do not create navigation or refresh actions outside it.” Apply this procedure: State the contract for contain stops boundary propagation, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: Vertical boundary input stays with the drawer instead of scrolling an ancestor, while a local affordance may remain. For the API decision, add one near-miss that exposes claiming contain removes every visual boundary effect. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 3: revision drawer. Predict the rule using a long notes panel reaches its end without moving the page behind it. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “contain prevents scroll chaining outside the element while preserving local overscroll affordances that do not create navigation or refresh actions outside it.” Apply this procedure: State the contract for contain stops boundary propagation, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: Vertical boundary input stays with the drawer instead of scrolling an ancestor, while a local affordance may remain. For the revision drawer, add one near-miss that exposes claiming contain removes every visual boundary effect. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 4: practice modal. Contrast the rule using answer feedback scrolls inside a dialog with deliberate boundary handling. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “contain prevents scroll chaining outside the element while preserving local overscroll affordances that do not create navigation or refresh actions outside it.” Apply this procedure: State the contract for contain stops boundary propagation, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: Vertical boundary input stays with the drawer instead of scrolling an ancestor, while a local affordance may remain. For the practice modal, add one near-miss that exposes claiming contain removes every visual boundary effect. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Diagnostic route
- Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
- Boundary check: create the smallest input that triggers claiming contain removes every visual boundary effect.
- Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
- Repair check: use the reversible procedure “State the contract for contain stops boundary propagation, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence.” and record the first changed observation.
- Transfer check: repeat the rule in a second context and identify what remains invariant.
A parent does not need to know the final CSS overscroll-behavior syntax. For this chapter, useful prompts are: “What did you expect from contain stops boundary propagation?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing claiming contain removes every visual boundary effect be made smaller?” The learner, not the parent, should supply the technical explanation.
Practice with an explained answer
Question. Build a tiny revision drawer with a long notes panel reaches its end without moving the page behind it. Include one ordinary case, one boundary and one deliberate failure caused by claiming contain removes every visual boundary effect. Predict each result before using a tool, then report the first point where observation differs from prediction.
Answer guide. A strong response starts with the rule: contain prevents scroll chaining outside the element while preserving local overscroll affordances that do not create navigation or refresh actions outside it. It shows a trace, not only a final value. The ordinary case should demonstrate “Vertical boundary input stays with the drawer instead of scrolling an ancestor, while a local affordance may remain.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: State the contract for contain stops boundary propagation, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. Other data choices are valid when the evidence supports the same causal chain.
Decision and transfer
For contain stops boundary propagation, separate the documented CSS overscroll-behavior mechanism from the project policy. State exactly what the technical contract guarantees, then state the project choice about validation, ordering, ownership, performance or recovery. Test whether the same distinction survives one transfer case, and keep stateful experiments disposable and backed up.
Previous chapter . Contents . Next chapter
none prevents scroll chaining and suppresses the user agent’s overscroll affordance on that axis. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.
The high-value mistake in this chapter is using none everywhere because it sounds stronger. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. State the contract for none also suppresses overscroll affordances, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence.
For the none also suppresses overscroll affordances chapter on CSS overscroll-behavior, use a two-column trace during a short Punggol home session. On the left, write the predicted state for this exact mechanism before the tool runs. On the right, record the observation that bears on using none everywhere because it sounds stronger. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.
Core worked example
.canvas { overflow:auto; overscroll-behavior:none; }Explained result. Neither ancestor chaining nor the normal boundary affordance is requested, so usability consequences require testing. Check the boundary as well as the happy path: ask what happens with an empty input, a duplicate or tied value, an unsupported type, a missing path, a NULL, or a second reference to the same object. Only the relevant boundary should be kept; the list is a prompt for judgment, not a demand to force every case into every example.
Four purposeful transfer cases
Case 1: revision drawer. Transfer the rule using a long notes panel reaches its end without moving the page behind it. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “none prevents scroll chaining and suppresses the user agent’s overscroll affordance on that axis.” Apply this procedure: State the contract for none also suppresses overscroll affordances, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: Neither ancestor chaining nor the normal boundary affordance is requested, so usability consequences require testing. For the revision drawer, add one near-miss that exposes using none everywhere because it sounds stronger. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 2: practice modal. Predict the rule using answer feedback scrolls inside a dialog with deliberate boundary handling. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “none prevents scroll chaining and suppresses the user agent’s overscroll affordance on that axis.” Apply this procedure: State the contract for none also suppresses overscroll affordances, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: Neither ancestor chaining nor the normal boundary affordance is requested, so usability consequences require testing. For the practice modal, add one near-miss that exposes using none everywhere because it sounds stronger. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 3: flashcard carousel. Contrast the rule using horizontal swipes stay within a card strip at its first and last item. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “none prevents scroll chaining and suppresses the user agent’s overscroll affordance on that axis.” Apply this procedure: State the contract for none also suppresses overscroll affordances, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: Neither ancestor chaining nor the normal boundary affordance is requested, so usability consequences require testing. For the flashcard carousel, add one near-miss that exposes using none everywhere because it sounds stronger. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 4: family timetable. Stress-test the rule using a short list proves that no boundary policy matters until the box can actually scroll. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “none prevents scroll chaining and suppresses the user agent’s overscroll affordance on that axis.” Apply this procedure: State the contract for none also suppresses overscroll affordances, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: Neither ancestor chaining nor the normal boundary affordance is requested, so usability consequences require testing. For the family timetable, add one near-miss that exposes using none everywhere because it sounds stronger. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Diagnostic route
- Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
- Boundary check: create the smallest input that triggers using none everywhere because it sounds stronger.
- Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
- Repair check: use the reversible procedure “State the contract for none also suppresses overscroll affordances, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence.” and record the first changed observation.
- Transfer check: repeat the rule in a second context and identify what remains invariant.
A parent does not need to know the final CSS overscroll-behavior syntax. For this chapter, useful prompts are: “What did you expect from none also suppresses overscroll affordances?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing using none everywhere because it sounds stronger be made smaller?” The learner, not the parent, should supply the technical explanation.
Practice with an explained answer
Question. Build a tiny practice modal with answer feedback scrolls inside a dialog with deliberate boundary handling. Include one ordinary case, one boundary and one deliberate failure caused by using none everywhere because it sounds stronger. Predict each result before using a tool, then report the first point where observation differs from prediction.
Answer guide. A strong response starts with the rule: none prevents scroll chaining and suppresses the user agent’s overscroll affordance on that axis. It shows a trace, not only a final value. The ordinary case should demonstrate “Neither ancestor chaining nor the normal boundary affordance is requested, so usability consequences require testing.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: State the contract for none also suppresses overscroll affordances, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. Other data choices are valid when the evidence supports the same causal chain.
Decision and transfer
For none also suppresses overscroll affordances, separate the documented CSS overscroll-behavior mechanism from the project policy. State exactly what the technical contract guarantees, then state the project choice about validation, ordering, ownership, performance or recovery. Test whether the same distinction survives one transfer case, and keep stateful experiments disposable and backed up.
Previous chapter . Contents . Next chapter
One keyword sets both x and y; two keywords set x first and y second. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.
The high-value mistake in this chapter is reading the first value as vertical because vertical scrolling is more common. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. State the contract for The shorthand accepts one or two values, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence.
For the The shorthand accepts one or two values chapter on CSS overscroll-behavior, use a two-column trace during a short Punggol home session. On the left, write the predicted state for this exact mechanism before the tool runs. On the right, record the observation that bears on reading the first value as vertical because vertical scrolling is more common. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.
Core worked example
.sheet { overscroll-behavior: contain auto; }Explained result. The x axis is contained and the y axis keeps auto behaviour. Check the boundary as well as the happy path: ask what happens with an empty input, a duplicate or tied value, an unsupported type, a missing path, a NULL, or a second reference to the same object. Only the relevant boundary should be kept; the list is a prompt for judgment, not a demand to force every case into every example.
Four purposeful transfer cases
Case 1: flashcard carousel. Predict the rule using horizontal swipes stay within a card strip at its first and last item. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “One keyword sets both x and y; two keywords set x first and y second.” Apply this procedure: State the contract for The shorthand accepts one or two values, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: The x axis is contained and the y axis keeps auto behaviour. For the flashcard carousel, add one near-miss that exposes reading the first value as vertical because vertical scrolling is more common. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 2: family timetable. Contrast the rule using a short list proves that no boundary policy matters until the box can actually scroll. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “One keyword sets both x and y; two keywords set x first and y second.” Apply this procedure: State the contract for The shorthand accepts one or two values, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: The x axis is contained and the y axis keeps auto behaviour. For the family timetable, add one near-miss that exposes reading the first value as vertical because vertical scrolling is more common. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 3: mobile worksheet. Stress-test the rule using vertical pull gestures are compared under contain and none. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “One keyword sets both x and y; two keywords set x first and y second.” Apply this procedure: State the contract for The shorthand accepts one or two values, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: The x axis is contained and the y axis keeps auto behaviour. For the mobile worksheet, add one near-miss that exposes reading the first value as vertical because vertical scrolling is more common. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 4: writing-mode lab. Explain the rule using physical x and y axes are checked instead of guessed from inline direction. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “One keyword sets both x and y; two keywords set x first and y second.” Apply this procedure: State the contract for The shorthand accepts one or two values, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: The x axis is contained and the y axis keeps auto behaviour. For the writing-mode lab, add one near-miss that exposes reading the first value as vertical because vertical scrolling is more common. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Diagnostic route
- Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
- Boundary check: create the smallest input that triggers reading the first value as vertical because vertical scrolling is more common.
- Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
- Repair check: use the reversible procedure “State the contract for The shorthand accepts one or two values, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence.” and record the first changed observation.
- Transfer check: repeat the rule in a second context and identify what remains invariant.
A parent does not need to know the final CSS overscroll-behavior syntax. For this chapter, useful prompts are: “What did you expect from The shorthand accepts one or two values?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing reading the first value as vertical because vertical scrolling is more common be made smaller?” The learner, not the parent, should supply the technical explanation.
Practice with an explained answer
Question. Build a tiny flashcard carousel with horizontal swipes stay within a card strip at its first and last item. Include one ordinary case, one boundary and one deliberate failure caused by reading the first value as vertical because vertical scrolling is more common. Predict each result before using a tool, then report the first point where observation differs from prediction.
Answer guide. A strong response starts with the rule: One keyword sets both x and y; two keywords set x first and y second. It shows a trace, not only a final value. The ordinary case should demonstrate “The x axis is contained and the y axis keeps auto behaviour.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: State the contract for The shorthand accepts one or two values, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. Other data choices are valid when the evidence supports the same causal chain.
Decision and transfer
For The shorthand accepts one or two values, separate the documented CSS overscroll-behavior mechanism from the project policy. State exactly what the technical contract guarantees, then state the project choice about validation, ordering, ownership, performance or recovery. Test whether the same distinction survives one transfer case, and keep stateful experiments disposable and backed up.
Previous chapter . Contents . Next chapter
overscroll-behavior-x and overscroll-behavior-y let a design control horizontal and vertical boundary policy independently. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.
The high-value mistake in this chapter is assuming x always means the logical inline axis in every writing mode. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. State the contract for Axis longhands target physical directions, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence.
For the Axis longhands target physical directions chapter on CSS overscroll-behavior, use a two-column trace during a short Punggol home session. On the left, write the predicted state for this exact mechanism before the tool runs. On the right, record the observation that bears on assuming x always means the logical inline axis in every writing mode. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.
Core worked example
.carousel { overflow-x:auto; overscroll-behavior-x:contain; }Explained result. Horizontal chaining is contained while the vertical axis keeps its independently computed policy. Check the boundary as well as the happy path: ask what happens with an empty input, a duplicate or tied value, an unsupported type, a missing path, a NULL, or a second reference to the same object. Only the relevant boundary should be kept; the list is a prompt for judgment, not a demand to force every case into every example.
Four purposeful transfer cases
Case 1: mobile worksheet. Contrast the rule using vertical pull gestures are compared under contain and none. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “overscroll-behavior-x and overscroll-behavior-y let a design control horizontal and vertical boundary policy independently.” Apply this procedure: State the contract for Axis longhands target physical directions, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: Horizontal chaining is contained while the vertical axis keeps its independently computed policy. For the mobile worksheet, add one near-miss that exposes assuming x always means the logical inline axis in every writing mode. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 2: writing-mode lab. Stress-test the rule using physical x and y axes are checked instead of guessed from inline direction. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “overscroll-behavior-x and overscroll-behavior-y let a design control horizontal and vertical boundary policy independently.” Apply this procedure: State the contract for Axis longhands target physical directions, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: Horizontal chaining is contained while the vertical axis keeps its independently computed policy. For the writing-mode lab, add one near-miss that exposes assuming x always means the logical inline axis in every writing mode. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 3: accessibility audit. Explain the rule using keyboard focus, zoom and scrolling remain usable after containment. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “overscroll-behavior-x and overscroll-behavior-y let a design control horizontal and vertical boundary policy independently.” Apply this procedure: State the contract for Axis longhands target physical directions, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: Horizontal chaining is contained while the vertical axis keeps its independently computed policy. For the accessibility audit, add one near-miss that exposes assuming x always means the logical inline axis in every writing mode. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 4: API decision. Transfer the rule using CSS boundary policy is compared with JavaScript gesture interception. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “overscroll-behavior-x and overscroll-behavior-y let a design control horizontal and vertical boundary policy independently.” Apply this procedure: State the contract for Axis longhands target physical directions, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: Horizontal chaining is contained while the vertical axis keeps its independently computed policy. For the API decision, add one near-miss that exposes assuming x always means the logical inline axis in every writing mode. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Diagnostic route
- Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
- Boundary check: create the smallest input that triggers assuming x always means the logical inline axis in every writing mode.
- Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
- Repair check: use the reversible procedure “State the contract for Axis longhands target physical directions, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence.” and record the first changed observation.
- Transfer check: repeat the rule in a second context and identify what remains invariant.
A parent does not need to know the final CSS overscroll-behavior syntax. For this chapter, useful prompts are: “What did you expect from Axis longhands target physical directions?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing assuming x always means the logical inline axis in every writing mode be made smaller?” The learner, not the parent, should supply the technical explanation.
Practice with an explained answer
Question. Build a tiny family timetable with a short list proves that no boundary policy matters until the box can actually scroll. Include one ordinary case, one boundary and one deliberate failure caused by assuming x always means the logical inline axis in every writing mode. Predict each result before using a tool, then report the first point where observation differs from prediction.
Answer guide. A strong response starts with the rule: overscroll-behavior-x and overscroll-behavior-y let a design control horizontal and vertical boundary policy independently. It shows a trace, not only a final value. The ordinary case should demonstrate “Horizontal chaining is contained while the vertical axis keeps its independently computed policy.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: State the contract for Axis longhands target physical directions, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. Other data choices are valid when the evidence supports the same causal chain.
Decision and transfer
For Axis longhands target physical directions, separate the documented CSS overscroll-behavior mechanism from the project policy. State exactly what the technical contract guarantees, then state the project choice about validation, ordering, ownership, performance or recovery. Test whether the same distinction survives one transfer case, and keep stateful experiments disposable and backed up.
Previous chapter . Contents . Next chapter
The boundary policy is meaningful on a scroll container; placing it on an arbitrary wrapper does not automatically govern a deeper scroller. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.
The high-value mistake in this chapter is styling the modal shell when the modal body owns overflow. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. State the contract for The property applies to scroll containers, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence.
For the The property applies to scroll containers chapter on CSS overscroll-behavior, use a two-column trace during a short Punggol home session. On the left, write the predicted state for this exact mechanism before the tool runs. On the right, record the observation that bears on styling the modal shell when the modal body owns overflow. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.
Core worked example
.modal__body { max-height:70vh; overflow:auto; overscroll-behavior-y:contain; }Explained result. The declaration targets the element whose scrollTop changes. Check the boundary as well as the happy path: ask what happens with an empty input, a duplicate or tied value, an unsupported type, a missing path, a NULL, or a second reference to the same object. Only the relevant boundary should be kept; the list is a prompt for judgment, not a demand to force every case into every example.
Four purposeful transfer cases
Case 1: accessibility audit. Stress-test the rule using keyboard focus, zoom and scrolling remain usable after containment. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “The boundary policy is meaningful on a scroll container; placing it on an arbitrary wrapper does not automatically govern a deeper scroller.” Apply this procedure: State the contract for The property applies to scroll containers, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: The declaration targets the element whose scrollTop changes. For the accessibility audit, add one near-miss that exposes styling the modal shell when the modal body owns overflow. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 2: API decision. Explain the rule using CSS boundary policy is compared with JavaScript gesture interception. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “The boundary policy is meaningful on a scroll container; placing it on an arbitrary wrapper does not automatically govern a deeper scroller.” Apply this procedure: State the contract for The property applies to scroll containers, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: The declaration targets the element whose scrollTop changes. For the API decision, add one near-miss that exposes styling the modal shell when the modal body owns overflow. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 3: revision drawer. Transfer the rule using a long notes panel reaches its end without moving the page behind it. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “The boundary policy is meaningful on a scroll container; placing it on an arbitrary wrapper does not automatically govern a deeper scroller.” Apply this procedure: State the contract for The property applies to scroll containers, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: The declaration targets the element whose scrollTop changes. For the revision drawer, add one near-miss that exposes styling the modal shell when the modal body owns overflow. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 4: practice modal. Predict the rule using answer feedback scrolls inside a dialog with deliberate boundary handling. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “The boundary policy is meaningful on a scroll container; placing it on an arbitrary wrapper does not automatically govern a deeper scroller.” Apply this procedure: State the contract for The property applies to scroll containers, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: The declaration targets the element whose scrollTop changes. For the practice modal, add one near-miss that exposes styling the modal shell when the modal body owns overflow. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Diagnostic route
- Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
- Boundary check: create the smallest input that triggers styling the modal shell when the modal body owns overflow.
- Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
- Repair check: use the reversible procedure “State the contract for The property applies to scroll containers, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence.” and record the first changed observation.
- Transfer check: repeat the rule in a second context and identify what remains invariant.
A parent does not need to know the final CSS overscroll-behavior syntax. For this chapter, useful prompts are: “What did you expect from The property applies to scroll containers?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing styling the modal shell when the modal body owns overflow be made smaller?” The learner, not the parent, should supply the technical explanation.
Practice with an explained answer
Question. Build a tiny mobile worksheet with vertical pull gestures are compared under contain and none. Include one ordinary case, one boundary and one deliberate failure caused by styling the modal shell when the modal body owns overflow. Predict each result before using a tool, then report the first point where observation differs from prediction.
Answer guide. A strong response starts with the rule: The boundary policy is meaningful on a scroll container; placing it on an arbitrary wrapper does not automatically govern a deeper scroller. It shows a trace, not only a final value. The ordinary case should demonstrate “The declaration targets the element whose scrollTop changes.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: State the contract for The property applies to scroll containers, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. Other data choices are valid when the evidence supports the same causal chain.
Decision and transfer
For The property applies to scroll containers, separate the documented CSS overscroll-behavior mechanism from the project policy. State exactly what the technical contract guarantees, then state the project choice about validation, ordering, ownership, performance or recovery. Test whether the same distinction survives one transfer case, and keep stateful experiments disposable and backed up.
Previous chapter . Contents . Next chapter
overflow controls clipping and the existence of a scrolling box, while overscroll-behavior controls boundary actions after that box reaches an edge. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.
The high-value mistake in this chapter is using overscroll-behavior as a substitute for overflow auto. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. State the contract for overflow creates the scrolling mechanism, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence.
For the overflow creates the scrolling mechanism chapter on CSS overscroll-behavior, use a two-column trace during a short Punggol home session. On the left, write the predicted state for this exact mechanism before the tool runs. On the right, record the observation that bears on using overscroll-behavior as a substitute for overflow auto. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.
Core worked example
.notes { overflow-y:auto; overscroll-behavior-y:contain; }Explained result. Both declarations are needed because they answer different questions. Check the boundary as well as the happy path: ask what happens with an empty input, a duplicate or tied value, an unsupported type, a missing path, a NULL, or a second reference to the same object. Only the relevant boundary should be kept; the list is a prompt for judgment, not a demand to force every case into every example.
Four purposeful transfer cases
Case 1: revision drawer. Explain the rule using a long notes panel reaches its end without moving the page behind it. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “overflow controls clipping and the existence of a scrolling box, while overscroll-behavior controls boundary actions after that box reaches an edge.” Apply this procedure: State the contract for overflow creates the scrolling mechanism, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: Both declarations are needed because they answer different questions. For the revision drawer, add one near-miss that exposes using overscroll-behavior as a substitute for overflow auto. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 2: practice modal. Transfer the rule using answer feedback scrolls inside a dialog with deliberate boundary handling. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “overflow controls clipping and the existence of a scrolling box, while overscroll-behavior controls boundary actions after that box reaches an edge.” Apply this procedure: State the contract for overflow creates the scrolling mechanism, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: Both declarations are needed because they answer different questions. For the practice modal, add one near-miss that exposes using overscroll-behavior as a substitute for overflow auto. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 3: flashcard carousel. Predict the rule using horizontal swipes stay within a card strip at its first and last item. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “overflow controls clipping and the existence of a scrolling box, while overscroll-behavior controls boundary actions after that box reaches an edge.” Apply this procedure: State the contract for overflow creates the scrolling mechanism, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: Both declarations are needed because they answer different questions. For the flashcard carousel, add one near-miss that exposes using overscroll-behavior as a substitute for overflow auto. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 4: family timetable. Contrast the rule using a short list proves that no boundary policy matters until the box can actually scroll. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “overflow controls clipping and the existence of a scrolling box, while overscroll-behavior controls boundary actions after that box reaches an edge.” Apply this procedure: State the contract for overflow creates the scrolling mechanism, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: Both declarations are needed because they answer different questions. For the family timetable, add one near-miss that exposes using overscroll-behavior as a substitute for overflow auto. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Diagnostic route
- Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
- Boundary check: create the smallest input that triggers using overscroll-behavior as a substitute for overflow auto.
- Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
- Repair check: use the reversible procedure “State the contract for overflow creates the scrolling mechanism, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence.” and record the first changed observation.
- Transfer check: repeat the rule in a second context and identify what remains invariant.
A parent does not need to know the final CSS overscroll-behavior syntax. For this chapter, useful prompts are: “What did you expect from overflow creates the scrolling mechanism?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing using overscroll-behavior as a substitute for overflow auto be made smaller?” The learner, not the parent, should supply the technical explanation.
Practice with an explained answer
Question. Build a tiny writing-mode lab with physical x and y axes are checked instead of guessed from inline direction. Include one ordinary case, one boundary and one deliberate failure caused by using overscroll-behavior as a substitute for overflow auto. Predict each result before using a tool, then report the first point where observation differs from prediction.
Answer guide. A strong response starts with the rule: overflow controls clipping and the existence of a scrolling box, while overscroll-behavior controls boundary actions after that box reaches an edge. It shows a trace, not only a final value. The ordinary case should demonstrate “Both declarations are needed because they answer different questions.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: State the contract for overflow creates the scrolling mechanism, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. Other data choices are valid when the evidence supports the same causal chain.
Decision and transfer
For overflow creates the scrolling mechanism, separate the documented CSS overscroll-behavior mechanism from the project policy. State exactly what the technical contract guarantees, then state the project choice about validation, ordering, ownership, performance or recovery. Test whether the same distinction survives one transfer case, and keep stateful experiments disposable and backed up.
Previous chapter . Contents . Next chapter
Each nested scroll container can have its own boundary policy, so the design should state where scroll intention may transfer and where it must stop. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.
The high-value mistake in this chapter is adding contain to both levels without testing reachability of outer content. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. State the contract for Nested scrollers need explicit ownership, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence.
For the Nested scrollers need explicit ownership chapter on CSS overscroll-behavior, use a two-column trace during a short Punggol home session. On the left, write the predicted state for this exact mechanism before the tool runs. On the right, record the observation that bears on adding contain to both levels without testing reachability of outer content. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.
Core worked example
.page { overflow:auto; }
.panel { overflow:auto; overscroll-behavior:contain; }Explained result. The inner panel keeps boundary input from chaining to the page, while direct page input can still scroll the page. Check the boundary as well as the happy path: ask what happens with an empty input, a duplicate or tied value, an unsupported type, a missing path, a NULL, or a second reference to the same object. Only the relevant boundary should be kept; the list is a prompt for judgment, not a demand to force every case into every example.
Four purposeful transfer cases
Case 1: flashcard carousel. Transfer the rule using horizontal swipes stay within a card strip at its first and last item. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “Each nested scroll container can have its own boundary policy, so the design should state where scroll intention may transfer and where it must stop.” Apply this procedure: State the contract for Nested scrollers need explicit ownership, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: The inner panel keeps boundary input from chaining to the page, while direct page input can still scroll the page. For the flashcard carousel, add one near-miss that exposes adding contain to both levels without testing reachability of outer content. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 2: family timetable. Predict the rule using a short list proves that no boundary policy matters until the box can actually scroll. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “Each nested scroll container can have its own boundary policy, so the design should state where scroll intention may transfer and where it must stop.” Apply this procedure: State the contract for Nested scrollers need explicit ownership, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: The inner panel keeps boundary input from chaining to the page, while direct page input can still scroll the page. For the family timetable, add one near-miss that exposes adding contain to both levels without testing reachability of outer content. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 3: mobile worksheet. Contrast the rule using vertical pull gestures are compared under contain and none. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “Each nested scroll container can have its own boundary policy, so the design should state where scroll intention may transfer and where it must stop.” Apply this procedure: State the contract for Nested scrollers need explicit ownership, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: The inner panel keeps boundary input from chaining to the page, while direct page input can still scroll the page. For the mobile worksheet, add one near-miss that exposes adding contain to both levels without testing reachability of outer content. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 4: writing-mode lab. Stress-test the rule using physical x and y axes are checked instead of guessed from inline direction. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “Each nested scroll container can have its own boundary policy, so the design should state where scroll intention may transfer and where it must stop.” Apply this procedure: State the contract for Nested scrollers need explicit ownership, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: The inner panel keeps boundary input from chaining to the page, while direct page input can still scroll the page. For the writing-mode lab, add one near-miss that exposes adding contain to both levels without testing reachability of outer content. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Diagnostic route
- Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
- Boundary check: create the smallest input that triggers adding contain to both levels without testing reachability of outer content.
- Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
- Repair check: use the reversible procedure “State the contract for Nested scrollers need explicit ownership, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence.” and record the first changed observation.
- Transfer check: repeat the rule in a second context and identify what remains invariant.
A parent does not need to know the final CSS overscroll-behavior syntax. For this chapter, useful prompts are: “What did you expect from Nested scrollers need explicit ownership?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing adding contain to both levels without testing reachability of outer content be made smaller?” The learner, not the parent, should supply the technical explanation.
Practice with an explained answer
Question. Build a tiny accessibility audit with keyboard focus, zoom and scrolling remain usable after containment. Include one ordinary case, one boundary and one deliberate failure caused by adding contain to both levels without testing reachability of outer content. Predict each result before using a tool, then report the first point where observation differs from prediction.
Answer guide. A strong response starts with the rule: Each nested scroll container can have its own boundary policy, so the design should state where scroll intention may transfer and where it must stop. It shows a trace, not only a final value. The ordinary case should demonstrate “The inner panel keeps boundary input from chaining to the page, while direct page input can still scroll the page.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: State the contract for Nested scrollers need explicit ownership, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. Other data choices are valid when the evidence supports the same causal chain.
Decision and transfer
For Nested scrollers need explicit ownership, separate the documented CSS overscroll-behavior mechanism from the project policy. State exactly what the technical contract guarantees, then state the project choice about validation, ordering, ownership, performance or recovery. Test whether the same distinction survives one transfer case, and keep stateful experiments disposable and backed up.
Previous chapter . Contents . Next chapter
CHAPTER 11 OF 20 . Handle boundaries
11. Modal backdrops are a common containment case
A scrollable modal body can use contain to reduce background-page movement when the body reaches its top or bottom. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.
The high-value mistake in this chapter is claiming this property alone implements a complete accessible modal. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. State the contract for Modal backdrops are a common containment case, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence.
For the Modal backdrops are a common containment case chapter on CSS overscroll-behavior, use a two-column trace during a short Punggol home session. On the left, write the predicted state for this exact mechanism before the tool runs. On the right, record the observation that bears on claiming this property alone implements a complete accessible modal. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.
Core worked example
.dialog-body { max-height:70vh; overflow-y:auto; overscroll-behavior-y:contain; }Explained result. Boundary chaining is addressed, but focus management, semantics, escape handling and background interaction remain separate duties. Check the boundary as well as the happy path: ask what happens with an empty input, a duplicate or tied value, an unsupported type, a missing path, a NULL, or a second reference to the same object. Only the relevant boundary should be kept; the list is a prompt for judgment, not a demand to force every case into every example.
Four purposeful transfer cases
Case 1: mobile worksheet. Predict the rule using vertical pull gestures are compared under contain and none. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “A scrollable modal body can use contain to reduce background-page movement when the body reaches its top or bottom.” Apply this procedure: State the contract for Modal backdrops are a common containment case, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: Boundary chaining is addressed, but focus management, semantics, escape handling and background interaction remain separate duties. For the mobile worksheet, add one near-miss that exposes claiming this property alone implements a complete accessible modal. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 2: writing-mode lab. Contrast the rule using physical x and y axes are checked instead of guessed from inline direction. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “A scrollable modal body can use contain to reduce background-page movement when the body reaches its top or bottom.” Apply this procedure: State the contract for Modal backdrops are a common containment case, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: Boundary chaining is addressed, but focus management, semantics, escape handling and background interaction remain separate duties. For the writing-mode lab, add one near-miss that exposes claiming this property alone implements a complete accessible modal. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 3: accessibility audit. Stress-test the rule using keyboard focus, zoom and scrolling remain usable after containment. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “A scrollable modal body can use contain to reduce background-page movement when the body reaches its top or bottom.” Apply this procedure: State the contract for Modal backdrops are a common containment case, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: Boundary chaining is addressed, but focus management, semantics, escape handling and background interaction remain separate duties. For the accessibility audit, add one near-miss that exposes claiming this property alone implements a complete accessible modal. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 4: API decision. Explain the rule using CSS boundary policy is compared with JavaScript gesture interception. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “A scrollable modal body can use contain to reduce background-page movement when the body reaches its top or bottom.” Apply this procedure: State the contract for Modal backdrops are a common containment case, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: Boundary chaining is addressed, but focus management, semantics, escape handling and background interaction remain separate duties. For the API decision, add one near-miss that exposes claiming this property alone implements a complete accessible modal. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Diagnostic route
- Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
- Boundary check: create the smallest input that triggers claiming this property alone implements a complete accessible modal.
- Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
- Repair check: use the reversible procedure “State the contract for Modal backdrops are a common containment case, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence.” and record the first changed observation.
- Transfer check: repeat the rule in a second context and identify what remains invariant.
A parent does not need to know the final CSS overscroll-behavior syntax. For this chapter, useful prompts are: “What did you expect from Modal backdrops are a common containment case?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing claiming this property alone implements a complete accessible modal be made smaller?” The learner, not the parent, should supply the technical explanation.
Practice with an explained answer
Question. Build a tiny API decision with CSS boundary policy is compared with JavaScript gesture interception. Include one ordinary case, one boundary and one deliberate failure caused by claiming this property alone implements a complete accessible modal. Predict each result before using a tool, then report the first point where observation differs from prediction.
Answer guide. A strong response starts with the rule: A scrollable modal body can use contain to reduce background-page movement when the body reaches its top or bottom. It shows a trace, not only a final value. The ordinary case should demonstrate “Boundary chaining is addressed, but focus management, semantics, escape handling and background interaction remain separate duties.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: State the contract for Modal backdrops are a common containment case, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. Other data choices are valid when the evidence supports the same causal chain.
Decision and transfer
For Modal backdrops are a common containment case, separate the documented CSS overscroll-behavior mechanism from the project policy. State exactly what the technical contract guarantees, then state the project choice about validation, ordering, ownership, performance or recovery. Test whether the same distinction survives one transfer case, and keep stateful experiments disposable and backed up.
Previous chapter . Contents . Next chapter
CHAPTER 12 OF 20 . Handle boundaries
12. Horizontal carousels should leave vertical reading usable
A horizontal strip can contain x-axis boundary behaviour while leaving y auto so vertical page scrolling remains available. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.
The high-value mistake in this chapter is setting overscroll-behavior none on both axes for a small carousel. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. State the contract for Horizontal carousels should leave vertical reading usable, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence.
For the Horizontal carousels should leave vertical reading usable chapter on CSS overscroll-behavior, use a two-column trace during a short Punggol home session. On the left, write the predicted state for this exact mechanism before the tool runs. On the right, record the observation that bears on setting overscroll-behavior none on both axes for a small carousel. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.
Core worked example
.cards { display:flex; overflow-x:auto; overscroll-behavior-x:contain; overscroll-behavior-y:auto; }Explained result. The rule is narrow: horizontal chaining is contained without suppressing vertical page navigation. Check the boundary as well as the happy path: ask what happens with an empty input, a duplicate or tied value, an unsupported type, a missing path, a NULL, or a second reference to the same object. Only the relevant boundary should be kept; the list is a prompt for judgment, not a demand to force every case into every example.
Four purposeful transfer cases
Case 1: accessibility audit. Contrast the rule using keyboard focus, zoom and scrolling remain usable after containment. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “A horizontal strip can contain x-axis boundary behaviour while leaving y auto so vertical page scrolling remains available.” Apply this procedure: State the contract for Horizontal carousels should leave vertical reading usable, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: The rule is narrow: horizontal chaining is contained without suppressing vertical page navigation. For the accessibility audit, add one near-miss that exposes setting overscroll-behavior none on both axes for a small carousel. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 2: API decision. Stress-test the rule using CSS boundary policy is compared with JavaScript gesture interception. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “A horizontal strip can contain x-axis boundary behaviour while leaving y auto so vertical page scrolling remains available.” Apply this procedure: State the contract for Horizontal carousels should leave vertical reading usable, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: The rule is narrow: horizontal chaining is contained without suppressing vertical page navigation. For the API decision, add one near-miss that exposes setting overscroll-behavior none on both axes for a small carousel. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 3: revision drawer. Explain the rule using a long notes panel reaches its end without moving the page behind it. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “A horizontal strip can contain x-axis boundary behaviour while leaving y auto so vertical page scrolling remains available.” Apply this procedure: State the contract for Horizontal carousels should leave vertical reading usable, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: The rule is narrow: horizontal chaining is contained without suppressing vertical page navigation. For the revision drawer, add one near-miss that exposes setting overscroll-behavior none on both axes for a small carousel. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 4: practice modal. Transfer the rule using answer feedback scrolls inside a dialog with deliberate boundary handling. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “A horizontal strip can contain x-axis boundary behaviour while leaving y auto so vertical page scrolling remains available.” Apply this procedure: State the contract for Horizontal carousels should leave vertical reading usable, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: The rule is narrow: horizontal chaining is contained without suppressing vertical page navigation. For the practice modal, add one near-miss that exposes setting overscroll-behavior none on both axes for a small carousel. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Diagnostic route
- Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
- Boundary check: create the smallest input that triggers setting overscroll-behavior none on both axes for a small carousel.
- Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
- Repair check: use the reversible procedure “State the contract for Horizontal carousels should leave vertical reading usable, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence.” and record the first changed observation.
- Transfer check: repeat the rule in a second context and identify what remains invariant.
A parent does not need to know the final CSS overscroll-behavior syntax. For this chapter, useful prompts are: “What did you expect from Horizontal carousels should leave vertical reading usable?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing setting overscroll-behavior none on both axes for a small carousel be made smaller?” The learner, not the parent, should supply the technical explanation.
Practice with an explained answer
Question. Build a tiny revision drawer with a long notes panel reaches its end without moving the page behind it. Include one ordinary case, one boundary and one deliberate failure caused by setting overscroll-behavior none on both axes for a small carousel. Predict each result before using a tool, then report the first point where observation differs from prediction.
Answer guide. A strong response starts with the rule: A horizontal strip can contain x-axis boundary behaviour while leaving y auto so vertical page scrolling remains available. It shows a trace, not only a final value. The ordinary case should demonstrate “The rule is narrow: horizontal chaining is contained without suppressing vertical page navigation.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: State the contract for Horizontal carousels should leave vertical reading usable, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. Other data choices are valid when the evidence supports the same causal chain.
Decision and transfer
For Horizontal carousels should leave vertical reading usable, separate the documented CSS overscroll-behavior mechanism from the project policy. State exactly what the technical contract guarantees, then state the project choice about validation, ordering, ownership, performance or recovery. Test whether the same distinction survives one transfer case, and keep stateful experiments disposable and backed up.
Previous chapter . Contents . Next chapter
CHAPTER 13 OF 20 . Debug and verify
13. Root boundary actions deserve special caution
Applying none on the root can suppress user-agent navigation or refresh affordances on affected axes, so the product must justify the loss. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.
The high-value mistake in this chapter is disabling pull-to-refresh or swipe navigation as a casual visual preference. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. State the contract for Root boundary actions deserve special caution, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence.
For the Root boundary actions deserve special caution chapter on CSS overscroll-behavior, use a two-column trace during a short Punggol home session. On the left, write the predicted state for this exact mechanism before the tool runs. On the right, record the observation that bears on disabling pull-to-refresh or swipe navigation as a casual visual preference. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.
Core worked example
html { overscroll-behavior-y:none; }Explained result. The page requests no vertical overscroll action; device and accessibility testing must confirm the trade-off. Check the boundary as well as the happy path: ask what happens with an empty input, a duplicate or tied value, an unsupported type, a missing path, a NULL, or a second reference to the same object. Only the relevant boundary should be kept; the list is a prompt for judgment, not a demand to force every case into every example.
Four purposeful transfer cases
Case 1: revision drawer. Stress-test the rule using a long notes panel reaches its end without moving the page behind it. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “Applying none on the root can suppress user-agent navigation or refresh affordances on affected axes, so the product must justify the loss.” Apply this procedure: State the contract for Root boundary actions deserve special caution, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: The page requests no vertical overscroll action; device and accessibility testing must confirm the trade-off. For the revision drawer, add one near-miss that exposes disabling pull-to-refresh or swipe navigation as a casual visual preference. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 2: practice modal. Explain the rule using answer feedback scrolls inside a dialog with deliberate boundary handling. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “Applying none on the root can suppress user-agent navigation or refresh affordances on affected axes, so the product must justify the loss.” Apply this procedure: State the contract for Root boundary actions deserve special caution, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: The page requests no vertical overscroll action; device and accessibility testing must confirm the trade-off. For the practice modal, add one near-miss that exposes disabling pull-to-refresh or swipe navigation as a casual visual preference. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 3: flashcard carousel. Transfer the rule using horizontal swipes stay within a card strip at its first and last item. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “Applying none on the root can suppress user-agent navigation or refresh affordances on affected axes, so the product must justify the loss.” Apply this procedure: State the contract for Root boundary actions deserve special caution, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: The page requests no vertical overscroll action; device and accessibility testing must confirm the trade-off. For the flashcard carousel, add one near-miss that exposes disabling pull-to-refresh or swipe navigation as a casual visual preference. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 4: family timetable. Predict the rule using a short list proves that no boundary policy matters until the box can actually scroll. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “Applying none on the root can suppress user-agent navigation or refresh affordances on affected axes, so the product must justify the loss.” Apply this procedure: State the contract for Root boundary actions deserve special caution, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: The page requests no vertical overscroll action; device and accessibility testing must confirm the trade-off. For the family timetable, add one near-miss that exposes disabling pull-to-refresh or swipe navigation as a casual visual preference. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Diagnostic route
- Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
- Boundary check: create the smallest input that triggers disabling pull-to-refresh or swipe navigation as a casual visual preference.
- Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
- Repair check: use the reversible procedure “State the contract for Root boundary actions deserve special caution, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence.” and record the first changed observation.
- Transfer check: repeat the rule in a second context and identify what remains invariant.
A parent does not need to know the final CSS overscroll-behavior syntax. For this chapter, useful prompts are: “What did you expect from Root boundary actions deserve special caution?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing disabling pull-to-refresh or swipe navigation as a casual visual preference be made smaller?” The learner, not the parent, should supply the technical explanation.
Practice with an explained answer
Question. Build a tiny practice modal with answer feedback scrolls inside a dialog with deliberate boundary handling. Include one ordinary case, one boundary and one deliberate failure caused by disabling pull-to-refresh or swipe navigation as a casual visual preference. Predict each result before using a tool, then report the first point where observation differs from prediction.
Answer guide. A strong response starts with the rule: Applying none on the root can suppress user-agent navigation or refresh affordances on affected axes, so the product must justify the loss. It shows a trace, not only a final value. The ordinary case should demonstrate “The page requests no vertical overscroll action; device and accessibility testing must confirm the trade-off.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: State the contract for Root boundary actions deserve special caution, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. Other data choices are valid when the evidence supports the same causal chain.
Decision and transfer
For Root boundary actions deserve special caution, separate the documented CSS overscroll-behavior mechanism from the project policy. State exactly what the technical contract guarantees, then state the project choice about validation, ordering, ownership, performance or recovery. Test whether the same distinction survives one transfer case, and keep stateful experiments disposable and backed up.
Previous chapter . Contents . Next chapter
CHAPTER 14 OF 20 . Debug and verify
14. touch-action controls gesture recognition, not chaining
touch-action tells the browser which touch gestures may drive panning or zooming, while overscroll-behavior governs what happens at a scroll boundary. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.
The high-value mistake in this chapter is using touch-action none to solve ancestor scroll chaining and disabling useful gestures. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. State the contract for touch-action controls gesture recognition, not chaining, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence.
For the touch-action controls gesture recognition, not chaining chapter on CSS overscroll-behavior, use a two-column trace during a short Punggol home session. On the left, write the predicted state for this exact mechanism before the tool runs. On the right, record the observation that bears on using touch-action none to solve ancestor scroll chaining and disabling useful gestures. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.
Core worked example
.panel { touch-action:pan-y; overscroll-behavior-y:contain; }Explained result. The browser may recognise vertical panning inside the panel, and its boundary does not chain upward. Check the boundary as well as the happy path: ask what happens with an empty input, a duplicate or tied value, an unsupported type, a missing path, a NULL, or a second reference to the same object. Only the relevant boundary should be kept; the list is a prompt for judgment, not a demand to force every case into every example.
Four purposeful transfer cases
Case 1: flashcard carousel. Explain the rule using horizontal swipes stay within a card strip at its first and last item. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “touch-action tells the browser which touch gestures may drive panning or zooming, while overscroll-behavior governs what happens at a scroll boundary.” Apply this procedure: State the contract for touch-action controls gesture recognition, not chaining, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: The browser may recognise vertical panning inside the panel, and its boundary does not chain upward. For the flashcard carousel, add one near-miss that exposes using touch-action none to solve ancestor scroll chaining and disabling useful gestures. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 2: family timetable. Transfer the rule using a short list proves that no boundary policy matters until the box can actually scroll. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “touch-action tells the browser which touch gestures may drive panning or zooming, while overscroll-behavior governs what happens at a scroll boundary.” Apply this procedure: State the contract for touch-action controls gesture recognition, not chaining, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: The browser may recognise vertical panning inside the panel, and its boundary does not chain upward. For the family timetable, add one near-miss that exposes using touch-action none to solve ancestor scroll chaining and disabling useful gestures. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 3: mobile worksheet. Predict the rule using vertical pull gestures are compared under contain and none. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “touch-action tells the browser which touch gestures may drive panning or zooming, while overscroll-behavior governs what happens at a scroll boundary.” Apply this procedure: State the contract for touch-action controls gesture recognition, not chaining, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: The browser may recognise vertical panning inside the panel, and its boundary does not chain upward. For the mobile worksheet, add one near-miss that exposes using touch-action none to solve ancestor scroll chaining and disabling useful gestures. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 4: writing-mode lab. Contrast the rule using physical x and y axes are checked instead of guessed from inline direction. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “touch-action tells the browser which touch gestures may drive panning or zooming, while overscroll-behavior governs what happens at a scroll boundary.” Apply this procedure: State the contract for touch-action controls gesture recognition, not chaining, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: The browser may recognise vertical panning inside the panel, and its boundary does not chain upward. For the writing-mode lab, add one near-miss that exposes using touch-action none to solve ancestor scroll chaining and disabling useful gestures. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Diagnostic route
- Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
- Boundary check: create the smallest input that triggers using touch-action none to solve ancestor scroll chaining and disabling useful gestures.
- Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
- Repair check: use the reversible procedure “State the contract for touch-action controls gesture recognition, not chaining, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence.” and record the first changed observation.
- Transfer check: repeat the rule in a second context and identify what remains invariant.
A parent does not need to know the final CSS overscroll-behavior syntax. For this chapter, useful prompts are: “What did you expect from touch-action controls gesture recognition, not chaining?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing using touch-action none to solve ancestor scroll chaining and disabling useful gestures be made smaller?” The learner, not the parent, should supply the technical explanation.
Practice with an explained answer
Question. Build a tiny flashcard carousel with horizontal swipes stay within a card strip at its first and last item. Include one ordinary case, one boundary and one deliberate failure caused by using touch-action none to solve ancestor scroll chaining and disabling useful gestures. Predict each result before using a tool, then report the first point where observation differs from prediction.
Answer guide. A strong response starts with the rule: touch-action tells the browser which touch gestures may drive panning or zooming, while overscroll-behavior governs what happens at a scroll boundary. It shows a trace, not only a final value. The ordinary case should demonstrate “The browser may recognise vertical panning inside the panel, and its boundary does not chain upward.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: State the contract for touch-action controls gesture recognition, not chaining, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. Other data choices are valid when the evidence supports the same causal chain.
Decision and transfer
For touch-action controls gesture recognition, not chaining, separate the documented CSS overscroll-behavior mechanism from the project policy. State exactly what the technical contract guarantees, then state the project choice about validation, ordering, ownership, performance or recovery. Test whether the same distinction survives one transfer case, and keep stateful experiments disposable and backed up.
Previous chapter . Contents . Next chapter
scroll-snap-type and related properties choose where scrolling settles; overscroll-behavior controls boundary propagation and affordances after the scroll range ends. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.
The high-value mistake in this chapter is adding contain and expecting cards to snap into alignment. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. State the contract for scroll-snap controls stopping positions, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence.
For the scroll-snap controls stopping positions chapter on CSS overscroll-behavior, use a two-column trace during a short Punggol home session. On the left, write the predicted state for this exact mechanism before the tool runs. On the right, record the observation that bears on adding contain and expecting cards to snap into alignment. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.
Core worked example
.cards { scroll-snap-type:x mandatory; overscroll-behavior-x:contain; }Explained result. Snapping and boundary containment cooperate but remain independent mechanisms. Check the boundary as well as the happy path: ask what happens with an empty input, a duplicate or tied value, an unsupported type, a missing path, a NULL, or a second reference to the same object. Only the relevant boundary should be kept; the list is a prompt for judgment, not a demand to force every case into every example.
Four purposeful transfer cases
Case 1: mobile worksheet. Transfer the rule using vertical pull gestures are compared under contain and none. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “scroll-snap-type and related properties choose where scrolling settles; overscroll-behavior controls boundary propagation and affordances after the scroll range ends.” Apply this procedure: State the contract for scroll-snap controls stopping positions, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: Snapping and boundary containment cooperate but remain independent mechanisms. For the mobile worksheet, add one near-miss that exposes adding contain and expecting cards to snap into alignment. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 2: writing-mode lab. Predict the rule using physical x and y axes are checked instead of guessed from inline direction. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “scroll-snap-type and related properties choose where scrolling settles; overscroll-behavior controls boundary propagation and affordances after the scroll range ends.” Apply this procedure: State the contract for scroll-snap controls stopping positions, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: Snapping and boundary containment cooperate but remain independent mechanisms. For the writing-mode lab, add one near-miss that exposes adding contain and expecting cards to snap into alignment. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 3: accessibility audit. Contrast the rule using keyboard focus, zoom and scrolling remain usable after containment. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “scroll-snap-type and related properties choose where scrolling settles; overscroll-behavior controls boundary propagation and affordances after the scroll range ends.” Apply this procedure: State the contract for scroll-snap controls stopping positions, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: Snapping and boundary containment cooperate but remain independent mechanisms. For the accessibility audit, add one near-miss that exposes adding contain and expecting cards to snap into alignment. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 4: API decision. Stress-test the rule using CSS boundary policy is compared with JavaScript gesture interception. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “scroll-snap-type and related properties choose where scrolling settles; overscroll-behavior controls boundary propagation and affordances after the scroll range ends.” Apply this procedure: State the contract for scroll-snap controls stopping positions, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: Snapping and boundary containment cooperate but remain independent mechanisms. For the API decision, add one near-miss that exposes adding contain and expecting cards to snap into alignment. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Diagnostic route
- Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
- Boundary check: create the smallest input that triggers adding contain and expecting cards to snap into alignment.
- Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
- Repair check: use the reversible procedure “State the contract for scroll-snap controls stopping positions, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence.” and record the first changed observation.
- Transfer check: repeat the rule in a second context and identify what remains invariant.
A parent does not need to know the final CSS overscroll-behavior syntax. For this chapter, useful prompts are: “What did you expect from scroll-snap controls stopping positions?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing adding contain and expecting cards to snap into alignment be made smaller?” The learner, not the parent, should supply the technical explanation.
Practice with an explained answer
Question. Build a tiny family timetable with a short list proves that no boundary policy matters until the box can actually scroll. Include one ordinary case, one boundary and one deliberate failure caused by adding contain and expecting cards to snap into alignment. Predict each result before using a tool, then report the first point where observation differs from prediction.
Answer guide. A strong response starts with the rule: scroll-snap-type and related properties choose where scrolling settles; overscroll-behavior controls boundary propagation and affordances after the scroll range ends. It shows a trace, not only a final value. The ordinary case should demonstrate “Snapping and boundary containment cooperate but remain independent mechanisms.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: State the contract for scroll-snap controls stopping positions, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. Other data choices are valid when the evidence supports the same causal chain.
Decision and transfer
For scroll-snap controls stopping positions, separate the documented CSS overscroll-behavior mechanism from the project policy. State exactly what the technical contract guarantees, then state the project choice about validation, ordering, ownership, performance or recovery. Test whether the same distinction survives one transfer case, and keep stateful experiments disposable and backed up.
Previous chapter . Contents . Next chapter
A child scroll container does not receive the ancestor’s overscroll-behavior value through inheritance, so every important scrolling box needs its own deliberate rule. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.
The high-value mistake in this chapter is setting the page value and assuming every embedded panel is contained. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. State the contract for The property is not inherited, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence.
For the The property is not inherited chapter on CSS overscroll-behavior, use a two-column trace during a short Punggol home session. On the left, write the predicted state for this exact mechanism before the tool runs. On the right, record the observation that bears on setting the page value and assuming every embedded panel is contained. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.
Core worked example
.page { overscroll-behavior:auto; }
.panel { overscroll-behavior-y:contain; }Explained result. The panel’s specified rule controls its own boundary rather than relying on inheritance. Check the boundary as well as the happy path: ask what happens with an empty input, a duplicate or tied value, an unsupported type, a missing path, a NULL, or a second reference to the same object. Only the relevant boundary should be kept; the list is a prompt for judgment, not a demand to force every case into every example.
Four purposeful transfer cases
Case 1: accessibility audit. Predict the rule using keyboard focus, zoom and scrolling remain usable after containment. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “A child scroll container does not receive the ancestor’s overscroll-behavior value through inheritance, so every important scrolling box needs its own deliberate rule.” Apply this procedure: State the contract for The property is not inherited, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: The panel’s specified rule controls its own boundary rather than relying on inheritance. For the accessibility audit, add one near-miss that exposes setting the page value and assuming every embedded panel is contained. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 2: API decision. Contrast the rule using CSS boundary policy is compared with JavaScript gesture interception. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “A child scroll container does not receive the ancestor’s overscroll-behavior value through inheritance, so every important scrolling box needs its own deliberate rule.” Apply this procedure: State the contract for The property is not inherited, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: The panel’s specified rule controls its own boundary rather than relying on inheritance. For the API decision, add one near-miss that exposes setting the page value and assuming every embedded panel is contained. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 3: revision drawer. Stress-test the rule using a long notes panel reaches its end without moving the page behind it. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “A child scroll container does not receive the ancestor’s overscroll-behavior value through inheritance, so every important scrolling box needs its own deliberate rule.” Apply this procedure: State the contract for The property is not inherited, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: The panel’s specified rule controls its own boundary rather than relying on inheritance. For the revision drawer, add one near-miss that exposes setting the page value and assuming every embedded panel is contained. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 4: practice modal. Explain the rule using answer feedback scrolls inside a dialog with deliberate boundary handling. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “A child scroll container does not receive the ancestor’s overscroll-behavior value through inheritance, so every important scrolling box needs its own deliberate rule.” Apply this procedure: State the contract for The property is not inherited, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: The panel’s specified rule controls its own boundary rather than relying on inheritance. For the practice modal, add one near-miss that exposes setting the page value and assuming every embedded panel is contained. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Diagnostic route
- Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
- Boundary check: create the smallest input that triggers setting the page value and assuming every embedded panel is contained.
- Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
- Repair check: use the reversible procedure “State the contract for The property is not inherited, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence.” and record the first changed observation.
- Transfer check: repeat the rule in a second context and identify what remains invariant.
A parent does not need to know the final CSS overscroll-behavior syntax. For this chapter, useful prompts are: “What did you expect from The property is not inherited?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing setting the page value and assuming every embedded panel is contained be made smaller?” The learner, not the parent, should supply the technical explanation.
Practice with an explained answer
Question. Build a tiny mobile worksheet with vertical pull gestures are compared under contain and none. Include one ordinary case, one boundary and one deliberate failure caused by setting the page value and assuming every embedded panel is contained. Predict each result before using a tool, then report the first point where observation differs from prediction.
Answer guide. A strong response starts with the rule: A child scroll container does not receive the ancestor’s overscroll-behavior value through inheritance, so every important scrolling box needs its own deliberate rule. It shows a trace, not only a final value. The ordinary case should demonstrate “The panel’s specified rule controls its own boundary rather than relying on inheritance.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: State the contract for The property is not inherited, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. Other data choices are valid when the evidence supports the same causal chain.
Decision and transfer
For The property is not inherited, separate the documented CSS overscroll-behavior mechanism from the project policy. State exactly what the technical contract guarantees, then state the project choice about validation, ordering, ownership, performance or recovery. Test whether the same distinction survives one transfer case, and keep stateful experiments disposable and backed up.
Previous chapter . Contents . Next chapter
CHAPTER 17 OF 20 . Transfer with judgment
17. Input methods expose different evidence
Wheel, trackpad, touch, keyboard and assistive navigation can reach boundaries differently, and a visual rubber-band effect may vary by platform. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.
The high-value mistake in this chapter is testing one mouse wheel on one desktop and declaring universal behaviour. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. State the contract for Input methods expose different evidence, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence.
For the Input methods expose different evidence chapter on CSS overscroll-behavior, use a two-column trace during a short Punggol home session. On the left, write the predicted state for this exact mechanism before the tool runs. On the right, record the observation that bears on testing one mouse wheel on one desktop and declaring universal behaviour. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.
Core worked example
/* Test the same nested fixture with wheel, touch, keyboard and zoom. */Explained result. The implementation is judged by interaction outcomes across relevant devices, not one animation. Check the boundary as well as the happy path: ask what happens with an empty input, a duplicate or tied value, an unsupported type, a missing path, a NULL, or a second reference to the same object. Only the relevant boundary should be kept; the list is a prompt for judgment, not a demand to force every case into every example.
Four purposeful transfer cases
Case 1: revision drawer. Contrast the rule using a long notes panel reaches its end without moving the page behind it. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “Wheel, trackpad, touch, keyboard and assistive navigation can reach boundaries differently, and a visual rubber-band effect may vary by platform.” Apply this procedure: State the contract for Input methods expose different evidence, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: The implementation is judged by interaction outcomes across relevant devices, not one animation. For the revision drawer, add one near-miss that exposes testing one mouse wheel on one desktop and declaring universal behaviour. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 2: practice modal. Stress-test the rule using answer feedback scrolls inside a dialog with deliberate boundary handling. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “Wheel, trackpad, touch, keyboard and assistive navigation can reach boundaries differently, and a visual rubber-band effect may vary by platform.” Apply this procedure: State the contract for Input methods expose different evidence, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: The implementation is judged by interaction outcomes across relevant devices, not one animation. For the practice modal, add one near-miss that exposes testing one mouse wheel on one desktop and declaring universal behaviour. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 3: flashcard carousel. Explain the rule using horizontal swipes stay within a card strip at its first and last item. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “Wheel, trackpad, touch, keyboard and assistive navigation can reach boundaries differently, and a visual rubber-band effect may vary by platform.” Apply this procedure: State the contract for Input methods expose different evidence, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: The implementation is judged by interaction outcomes across relevant devices, not one animation. For the flashcard carousel, add one near-miss that exposes testing one mouse wheel on one desktop and declaring universal behaviour. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 4: family timetable. Transfer the rule using a short list proves that no boundary policy matters until the box can actually scroll. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “Wheel, trackpad, touch, keyboard and assistive navigation can reach boundaries differently, and a visual rubber-band effect may vary by platform.” Apply this procedure: State the contract for Input methods expose different evidence, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: The implementation is judged by interaction outcomes across relevant devices, not one animation. For the family timetable, add one near-miss that exposes testing one mouse wheel on one desktop and declaring universal behaviour. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Diagnostic route
- Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
- Boundary check: create the smallest input that triggers testing one mouse wheel on one desktop and declaring universal behaviour.
- Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
- Repair check: use the reversible procedure “State the contract for Input methods expose different evidence, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence.” and record the first changed observation.
- Transfer check: repeat the rule in a second context and identify what remains invariant.
A parent does not need to know the final CSS overscroll-behavior syntax. For this chapter, useful prompts are: “What did you expect from Input methods expose different evidence?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing testing one mouse wheel on one desktop and declaring universal behaviour be made smaller?” The learner, not the parent, should supply the technical explanation.
Practice with an explained answer
Question. Build a tiny writing-mode lab with physical x and y axes are checked instead of guessed from inline direction. Include one ordinary case, one boundary and one deliberate failure caused by testing one mouse wheel on one desktop and declaring universal behaviour. Predict each result before using a tool, then report the first point where observation differs from prediction.
Answer guide. A strong response starts with the rule: Wheel, trackpad, touch, keyboard and assistive navigation can reach boundaries differently, and a visual rubber-band effect may vary by platform. It shows a trace, not only a final value. The ordinary case should demonstrate “The implementation is judged by interaction outcomes across relevant devices, not one animation.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: State the contract for Input methods expose different evidence, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. Other data choices are valid when the evidence supports the same causal chain.
Decision and transfer
For Input methods expose different evidence, separate the documented CSS overscroll-behavior mechanism from the project policy. State exactly what the technical contract guarantees, then state the project choice about validation, ordering, ownership, performance or recovery. Test whether the same distinction survives one transfer case, and keep stateful experiments disposable and backed up.
Previous chapter . Contents . Next chapter
CHAPTER 18 OF 20 . Transfer with judgment
18. Focus and reachability remain accessibility requirements
Containment must not trap keyboard users or make outer content unreachable; focus order and direct ancestor scrolling still need to work. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.
The high-value mistake in this chapter is equating stopped scroll chaining with a desirable focus trap. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. State the contract for Focus and reachability remain accessibility requirements, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence.
For the Focus and reachability remain accessibility requirements chapter on CSS overscroll-behavior, use a two-column trace during a short Punggol home session. On the left, write the predicted state for this exact mechanism before the tool runs. On the right, record the observation that bears on equating stopped scroll chaining with a desirable focus trap. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.
Core worked example
.panel:focus-visible { outline:2px solid currentColor; }Explained result. Visible focus and deliberate navigation are evaluated separately from pointer boundary policy. Check the boundary as well as the happy path: ask what happens with an empty input, a duplicate or tied value, an unsupported type, a missing path, a NULL, or a second reference to the same object. Only the relevant boundary should be kept; the list is a prompt for judgment, not a demand to force every case into every example.
Four purposeful transfer cases
Case 1: flashcard carousel. Stress-test the rule using horizontal swipes stay within a card strip at its first and last item. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “Containment must not trap keyboard users or make outer content unreachable; focus order and direct ancestor scrolling still need to work.” Apply this procedure: State the contract for Focus and reachability remain accessibility requirements, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: Visible focus and deliberate navigation are evaluated separately from pointer boundary policy. For the flashcard carousel, add one near-miss that exposes equating stopped scroll chaining with a desirable focus trap. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 2: family timetable. Explain the rule using a short list proves that no boundary policy matters until the box can actually scroll. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “Containment must not trap keyboard users or make outer content unreachable; focus order and direct ancestor scrolling still need to work.” Apply this procedure: State the contract for Focus and reachability remain accessibility requirements, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: Visible focus and deliberate navigation are evaluated separately from pointer boundary policy. For the family timetable, add one near-miss that exposes equating stopped scroll chaining with a desirable focus trap. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 3: mobile worksheet. Transfer the rule using vertical pull gestures are compared under contain and none. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “Containment must not trap keyboard users or make outer content unreachable; focus order and direct ancestor scrolling still need to work.” Apply this procedure: State the contract for Focus and reachability remain accessibility requirements, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: Visible focus and deliberate navigation are evaluated separately from pointer boundary policy. For the mobile worksheet, add one near-miss that exposes equating stopped scroll chaining with a desirable focus trap. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 4: writing-mode lab. Predict the rule using physical x and y axes are checked instead of guessed from inline direction. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “Containment must not trap keyboard users or make outer content unreachable; focus order and direct ancestor scrolling still need to work.” Apply this procedure: State the contract for Focus and reachability remain accessibility requirements, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: Visible focus and deliberate navigation are evaluated separately from pointer boundary policy. For the writing-mode lab, add one near-miss that exposes equating stopped scroll chaining with a desirable focus trap. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Diagnostic route
- Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
- Boundary check: create the smallest input that triggers equating stopped scroll chaining with a desirable focus trap.
- Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
- Repair check: use the reversible procedure “State the contract for Focus and reachability remain accessibility requirements, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence.” and record the first changed observation.
- Transfer check: repeat the rule in a second context and identify what remains invariant.
A parent does not need to know the final CSS overscroll-behavior syntax. For this chapter, useful prompts are: “What did you expect from Focus and reachability remain accessibility requirements?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing equating stopped scroll chaining with a desirable focus trap be made smaller?” The learner, not the parent, should supply the technical explanation.
Practice with an explained answer
Question. Build a tiny accessibility audit with keyboard focus, zoom and scrolling remain usable after containment. Include one ordinary case, one boundary and one deliberate failure caused by equating stopped scroll chaining with a desirable focus trap. Predict each result before using a tool, then report the first point where observation differs from prediction.
Answer guide. A strong response starts with the rule: Containment must not trap keyboard users or make outer content unreachable; focus order and direct ancestor scrolling still need to work. It shows a trace, not only a final value. The ordinary case should demonstrate “Visible focus and deliberate navigation are evaluated separately from pointer boundary policy.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: State the contract for Focus and reachability remain accessibility requirements, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. Other data choices are valid when the evidence supports the same causal chain.
Decision and transfer
For Focus and reachability remain accessibility requirements, separate the documented CSS overscroll-behavior mechanism from the project policy. State exactly what the technical contract guarantees, then state the project choice about validation, ordering, ownership, performance or recovery. Test whether the same distinction survives one transfer case, and keep stateful experiments disposable and backed up.
Previous chapter . Contents . Next chapter
CHAPTER 19 OF 20 . Transfer with judgment
19. Feature queries can guard progressive enhancement
@supports can apply a containment rule only where the property-value pair is recognised, while the base overflow layout remains functional. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.
The high-value mistake in this chapter is making the fallback depend on unavailable JavaScript cancellation hacks. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. State the contract for Feature queries can guard progressive enhancement, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence.
For the Feature queries can guard progressive enhancement chapter on CSS overscroll-behavior, use a two-column trace during a short Punggol home session. On the left, write the predicted state for this exact mechanism before the tool runs. On the right, record the observation that bears on making the fallback depend on unavailable JavaScript cancellation hacks. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.
Core worked example
@supports (overscroll-behavior: contain) { .panel { overscroll-behavior:contain; } }Explained result. Supporting browsers gain the boundary policy and others keep ordinary scrolling. Check the boundary as well as the happy path: ask what happens with an empty input, a duplicate or tied value, an unsupported type, a missing path, a NULL, or a second reference to the same object. Only the relevant boundary should be kept; the list is a prompt for judgment, not a demand to force every case into every example.
Four purposeful transfer cases
Case 1: mobile worksheet. Explain the rule using vertical pull gestures are compared under contain and none. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “@supports can apply a containment rule only where the property-value pair is recognised, while the base overflow layout remains functional.” Apply this procedure: State the contract for Feature queries can guard progressive enhancement, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: Supporting browsers gain the boundary policy and others keep ordinary scrolling. For the mobile worksheet, add one near-miss that exposes making the fallback depend on unavailable JavaScript cancellation hacks. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 2: writing-mode lab. Transfer the rule using physical x and y axes are checked instead of guessed from inline direction. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “@supports can apply a containment rule only where the property-value pair is recognised, while the base overflow layout remains functional.” Apply this procedure: State the contract for Feature queries can guard progressive enhancement, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: Supporting browsers gain the boundary policy and others keep ordinary scrolling. For the writing-mode lab, add one near-miss that exposes making the fallback depend on unavailable JavaScript cancellation hacks. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 3: accessibility audit. Predict the rule using keyboard focus, zoom and scrolling remain usable after containment. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “@supports can apply a containment rule only where the property-value pair is recognised, while the base overflow layout remains functional.” Apply this procedure: State the contract for Feature queries can guard progressive enhancement, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: Supporting browsers gain the boundary policy and others keep ordinary scrolling. For the accessibility audit, add one near-miss that exposes making the fallback depend on unavailable JavaScript cancellation hacks. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 4: API decision. Contrast the rule using CSS boundary policy is compared with JavaScript gesture interception. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “@supports can apply a containment rule only where the property-value pair is recognised, while the base overflow layout remains functional.” Apply this procedure: State the contract for Feature queries can guard progressive enhancement, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: Supporting browsers gain the boundary policy and others keep ordinary scrolling. For the API decision, add one near-miss that exposes making the fallback depend on unavailable JavaScript cancellation hacks. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Diagnostic route
- Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
- Boundary check: create the smallest input that triggers making the fallback depend on unavailable JavaScript cancellation hacks.
- Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
- Repair check: use the reversible procedure “State the contract for Feature queries can guard progressive enhancement, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence.” and record the first changed observation.
- Transfer check: repeat the rule in a second context and identify what remains invariant.
A parent does not need to know the final CSS overscroll-behavior syntax. For this chapter, useful prompts are: “What did you expect from Feature queries can guard progressive enhancement?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing making the fallback depend on unavailable JavaScript cancellation hacks be made smaller?” The learner, not the parent, should supply the technical explanation.
Practice with an explained answer
Question. Build a tiny API decision with CSS boundary policy is compared with JavaScript gesture interception. Include one ordinary case, one boundary and one deliberate failure caused by making the fallback depend on unavailable JavaScript cancellation hacks. Predict each result before using a tool, then report the first point where observation differs from prediction.
Answer guide. A strong response starts with the rule: @supports can apply a containment rule only where the property-value pair is recognised, while the base overflow layout remains functional. It shows a trace, not only a final value. The ordinary case should demonstrate “Supporting browsers gain the boundary policy and others keep ordinary scrolling.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: State the contract for Feature queries can guard progressive enhancement, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. Other data choices are valid when the evidence supports the same causal chain.
Decision and transfer
For Feature queries can guard progressive enhancement, separate the documented CSS overscroll-behavior mechanism from the project policy. State exactly what the technical contract guarantees, then state the project choice about validation, ordering, ownership, performance or recovery. Test whether the same distinction survives one transfer case, and keep stateful experiments disposable and backed up.
Previous chapter . Contents . Next chapter
CHAPTER 20 OF 20 . Transfer with judgment
20. Choose the narrowest boundary policy that solves the job
Use auto when chaining is useful, contain when chaining should stop but local affordance can remain, and none only when both chaining and affordance must be suppressed. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.
The high-value mistake in this chapter is starting with none and discovering lost navigation after release. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. State the contract for Choose the narrowest boundary policy that solves the job, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence.
For the Choose the narrowest boundary policy that solves the job chapter on CSS overscroll-behavior, use a two-column trace during a short Punggol home session. On the left, write the predicted state for this exact mechanism before the tool runs. On the right, record the observation that bears on starting with none and discovering lost navigation after release. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.
Core worked example
.revision-drawer { overflow-y:auto; overscroll-behavior-y:contain; }Explained result. The decision targets one vertical scrolling box and preserves unrelated browser behaviour. Check the boundary as well as the happy path: ask what happens with an empty input, a duplicate or tied value, an unsupported type, a missing path, a NULL, or a second reference to the same object. Only the relevant boundary should be kept; the list is a prompt for judgment, not a demand to force every case into every example.
Four purposeful transfer cases
Case 1: accessibility audit. Transfer the rule using keyboard focus, zoom and scrolling remain usable after containment. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “Use auto when chaining is useful, contain when chaining should stop but local affordance can remain, and none only when both chaining and affordance must be suppressed.” Apply this procedure: State the contract for Choose the narrowest boundary policy that solves the job, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: The decision targets one vertical scrolling box and preserves unrelated browser behaviour. For the accessibility audit, add one near-miss that exposes starting with none and discovering lost navigation after release. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 2: API decision. Predict the rule using CSS boundary policy is compared with JavaScript gesture interception. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “Use auto when chaining is useful, contain when chaining should stop but local affordance can remain, and none only when both chaining and affordance must be suppressed.” Apply this procedure: State the contract for Choose the narrowest boundary policy that solves the job, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: The decision targets one vertical scrolling box and preserves unrelated browser behaviour. For the API decision, add one near-miss that exposes starting with none and discovering lost navigation after release. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 3: revision drawer. Contrast the rule using a long notes panel reaches its end without moving the page behind it. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “Use auto when chaining is useful, contain when chaining should stop but local affordance can remain, and none only when both chaining and affordance must be suppressed.” Apply this procedure: State the contract for Choose the narrowest boundary policy that solves the job, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: The decision targets one vertical scrolling box and preserves unrelated browser behaviour. For the revision drawer, add one near-miss that exposes starting with none and discovering lost navigation after release. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 4: practice modal. Stress-test the rule using answer feedback scrolls inside a dialog with deliberate boundary handling. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “Use auto when chaining is useful, contain when chaining should stop but local affordance can remain, and none only when both chaining and affordance must be suppressed.” Apply this procedure: State the contract for Choose the narrowest boundary policy that solves the job, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: The decision targets one vertical scrolling box and preserves unrelated browser behaviour. For the practice modal, add one near-miss that exposes starting with none and discovering lost navigation after release. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Diagnostic route
- Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
- Boundary check: create the smallest input that triggers starting with none and discovering lost navigation after release.
- Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
- Repair check: use the reversible procedure “State the contract for Choose the narrowest boundary policy that solves the job, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence.” and record the first changed observation.
- Transfer check: repeat the rule in a second context and identify what remains invariant.
A parent does not need to know the final CSS overscroll-behavior syntax. For this chapter, useful prompts are: “What did you expect from Choose the narrowest boundary policy that solves the job?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing starting with none and discovering lost navigation after release be made smaller?” The learner, not the parent, should supply the technical explanation.
Practice with an explained answer
Question. Build a tiny revision drawer with a long notes panel reaches its end without moving the page behind it. Include one ordinary case, one boundary and one deliberate failure caused by starting with none and discovering lost navigation after release. Predict each result before using a tool, then report the first point where observation differs from prediction.
Answer guide. A strong response starts with the rule: Use auto when chaining is useful, contain when chaining should stop but local affordance can remain, and none only when both chaining and affordance must be suppressed. It shows a trace, not only a final value. The ordinary case should demonstrate “The decision targets one vertical scrolling box and preserves unrelated browser behaviour.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: State the contract for Choose the narrowest boundary policy that solves the job, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. Other data choices are valid when the evidence supports the same causal chain.
Decision and transfer
For Choose the narrowest boundary policy that solves the job, separate the documented CSS overscroll-behavior mechanism from the project policy. State exactly what the technical contract guarantees, then state the project choice about validation, ordering, ownership, performance or recovery. Test whether the same distinction survives one transfer case, and keep stateful experiments disposable and backed up.
Previous chapter . Contents . Next chapter
Parent guide: choose the next useful step
Start with evidence, not a label such as careless. Ask for one prediction and one trace. If the first transition is wrong, rebuild the model. If the model is sound but syntax fails, practise reference use. If routine cases are correct but boundaries fail, vary ties, defaults, unsupported inputs, ownership or missing paths. If explanations transfer, move to a small project.
Keep a weekly record with four lines: concept, prediction, observed difference and next test. Stop when fatigue replaces reasoning. A smaller case tomorrow is more useful than another hour of copying tonight.
Seek specialist help when cause and effect remain invisible after examples are reduced, when accessibility or data-loss implications are unclear, or when an important repository, database or application state may be at risk. Good support should make the learner’s reasoning more independent.
Capstone practice with explained routes
1. revision drawer: model, boundary and recovery
Create a small revision drawer using a long notes panel reaches its end without moving the page behind it. Combine “Overscroll begins at a scroll boundary” with one later chapter. Include an ordinary case, a boundary, a deliberate failure and a recovery. Write the expected state before each operation.
Explained route. Start with: Overscroll behaviour concerns an attempted continuation after a scroll container has reached the limit of its scroll range. Apply: State the contract for Overscroll begins at a scroll boundary, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. Verify: The panel first needs overflowing content; the property then governs boundary behaviour. Then add a second chapter whose boundary could change the outcome. A complete solution contains the input model, a trace, observed evidence, a correction and one transfer statement. The exact data may differ; the causal chain must be checkable.
2. practice modal: model, boundary and recovery
Create a small practice modal using answer feedback scrolls inside a dialog with deliberate boundary handling. Combine “contain stops boundary propagation” with one later chapter. Include an ordinary case, a boundary, a deliberate failure and a recovery. Write the expected state before each operation.
Explained route. Start with: contain prevents scroll chaining outside the element while preserving local overscroll affordances that do not create navigation or refresh actions outside it. Apply: State the contract for contain stops boundary propagation, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. Verify: Vertical boundary input stays with the drawer instead of scrolling an ancestor, while a local affordance may remain. Then add a second chapter whose boundary could change the outcome. A complete solution contains the input model, a trace, observed evidence, a correction and one transfer statement. The exact data may differ; the causal chain must be checkable.
3. flashcard carousel: model, boundary and recovery
Create a small flashcard carousel using horizontal swipes stay within a card strip at its first and last item. Combine “Axis longhands target physical directions” with one later chapter. Include an ordinary case, a boundary, a deliberate failure and a recovery. Write the expected state before each operation.
Explained route. Start with: overscroll-behavior-x and overscroll-behavior-y let a design control horizontal and vertical boundary policy independently. Apply: State the contract for Axis longhands target physical directions, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. Verify: Horizontal chaining is contained while the vertical axis keeps its independently computed policy. Then add a second chapter whose boundary could change the outcome. A complete solution contains the input model, a trace, observed evidence, a correction and one transfer statement. The exact data may differ; the causal chain must be checkable.
4. family timetable: model, boundary and recovery
Create a small family timetable using a short list proves that no boundary policy matters until the box can actually scroll. Combine “Nested scrollers need explicit ownership” with one later chapter. Include an ordinary case, a boundary, a deliberate failure and a recovery. Write the expected state before each operation.
Explained route. Start with: Each nested scroll container can have its own boundary policy, so the design should state where scroll intention may transfer and where it must stop. Apply: State the contract for Nested scrollers need explicit ownership, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. Verify: The inner panel keeps boundary input from chaining to the page, while direct page input can still scroll the page. Then add a second chapter whose boundary could change the outcome. A complete solution contains the input model, a trace, observed evidence, a correction and one transfer statement. The exact data may differ; the causal chain must be checkable.
5. mobile worksheet: model, boundary and recovery
Create a small mobile worksheet using vertical pull gestures are compared under contain and none. Combine “Root boundary actions deserve special caution” with one later chapter. Include an ordinary case, a boundary, a deliberate failure and a recovery. Write the expected state before each operation.
Explained route. Start with: Applying none on the root can suppress user-agent navigation or refresh affordances on affected axes, so the product must justify the loss. Apply: State the contract for Root boundary actions deserve special caution, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. Verify: The page requests no vertical overscroll action; device and accessibility testing must confirm the trade-off. Then add a second chapter whose boundary could change the outcome. A complete solution contains the input model, a trace, observed evidence, a correction and one transfer statement. The exact data may differ; the causal chain must be checkable.
6. writing-mode lab: model, boundary and recovery
Create a small writing-mode lab using physical x and y axes are checked instead of guessed from inline direction. Combine “The property is not inherited” with one later chapter. Include an ordinary case, a boundary, a deliberate failure and a recovery. Write the expected state before each operation.
Explained route. Start with: A child scroll container does not receive the ancestor’s overscroll-behavior value through inheritance, so every important scrolling box needs its own deliberate rule. Apply: State the contract for The property is not inherited, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. Verify: The panel’s specified rule controls its own boundary rather than relying on inheritance. Then add a second chapter whose boundary could change the outcome. A complete solution contains the input model, a trace, observed evidence, a correction and one transfer statement. The exact data may differ; the causal chain must be checkable.
7. accessibility audit: model, boundary and recovery
Create a small accessibility audit using keyboard focus, zoom and scrolling remain usable after containment. Combine “Feature queries can guard progressive enhancement” with one later chapter. Include an ordinary case, a boundary, a deliberate failure and a recovery. Write the expected state before each operation.
Explained route. Start with: @supports can apply a containment rule only where the property-value pair is recognised, while the base overflow layout remains functional. Apply: State the contract for Feature queries can guard progressive enhancement, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. Verify: Supporting browsers gain the boundary policy and others keep ordinary scrolling. Then add a second chapter whose boundary could change the outcome. A complete solution contains the input model, a trace, observed evidence, a correction and one transfer statement. The exact data may differ; the causal chain must be checkable.
8. API decision: model, boundary and recovery
Create a small API decision using CSS boundary policy is compared with JavaScript gesture interception. Combine “Scroll chaining moves input to an ancestor” with one later chapter. Include an ordinary case, a boundary, a deliberate failure and a recovery. Write the expected state before each operation.
Explained route. Start with: By default, an input that cannot continue scrolling a descendant may scroll an ancestor in the same direction, a behaviour called scroll chaining. Apply: State the contract for Scroll chaining moves input to an ancestor, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. Verify: At the inner boundary, default policy can allow the outer page to consume the remaining scroll intention. Then add a second chapter whose boundary could change the outcome. A complete solution contains the input model, a trace, observed evidence, a correction and one transfer statement. The exact data may differ; the causal chain must be checkable.
Frequently asked questions
How long should a practice session be?
Use one complete prediction–observation–explanation cycle while attention remains good. Ten to twenty focused minutes can be enough.
Should every option or function be memorised?
No. Memorise the governing distinctions and practise retrieving the official reference. Understanding means predicting and explaining, not reciting a parameter list.
What if the result is correct but the explanation is weak?
Treat it as partial success. Ask for a trace and change one boundary. A reliable model survives controlled variation.
Is the shortest solution the best?
Not automatically. Prefer the solution whose semantics, failure modes and maintenance cost are easiest to justify for the actual project.
When should official documentation be used?
Use it whenever syntax, supported types, SQL dialect behaviour or Git version details matter. Primary documentation settles the current contract.
How can a parent help without technical expertise?
Ask what was predicted, where the first difference appeared, what evidence matters and which smaller example could isolate it.
How do we test transfer?
Change the context, vocabulary and one boundary. Require the learner to identify the invariant before using a tool.
What should be saved after practice?
Keep the corrected rule, one trace, one boundary case and the next question. Avoid storing pages of unexplained output.
Can these exercises replace backups?
No. Use disposable examples and proper backups. Learning should not endanger schoolwork, repositories or personal data.
What counts as mastery?
The learner can predict, verify, diagnose, recover and justify a choice across more than one context, while knowing when to consult the current reference.
