Skip to content

Commit

Permalink
Clarify scrollMargin details
Browse files Browse the repository at this point in the history
  • Loading branch information
tcaptan-cr committed Sep 29, 2023
1 parent f22fbf4 commit a47c2fc
Showing 1 changed file with 17 additions and 14 deletions.
31 changes: 17 additions & 14 deletions index.bs
Original file line number Diff line number Diff line change
Expand Up @@ -288,8 +288,6 @@ interface IntersectionObserver {
::
Offsets are applied to <a>scrollports</a> on the path from <a>intersection root</a> to <a for="IntersectionObserver">target</a>,
effectively growing or shrinking the clip rects used to calculate intersections.
<b>These offsets are only applied when handling <a>same-origin-domain targets</a>;
for <a>cross-origin-domain targets</a> they are ignored.</b>

On getting, return the result of serializing the elements of {{[[scrollMargin]]}}
space-separated, where pixel lengths serialize as the numeric value followed by "px",
Expand Down Expand Up @@ -341,18 +339,23 @@ If a <a for="IntersectionObserver">target</a> {{Element}} is clipped by an ances
<a>intersection root</a>, that clipping is unaffected by
{{IntersectionObserver/rootMargin}}.

When calculating a <a>scrollport</a> intersection rectangle for
a <a>same-origin-domain target</a>, the rectangle is expanded
according to the offsets in the {{IntersectionObserver}}’s {{[[scrollMargin]]}} slot
in a manner similar to CSS's 'margin' property,
with the four values indicating the amount the top, right, bottom, and left edges, respectively, are offset by,
with positive lengths indicating an outward offset.
Percentages are resolved relative to the width of the undilated rectangle.
: To <dfn>apply scroll margin to a scrollport</dfn>
::
When calculating a <a>scrollport</a> intersection rectangle for
a <a>same-origin-domain target</a>, the rectangle is expanded
according to the offsets in the {{IntersectionObserver}}’s {{[[scrollMargin]]}} slot
in a manner similar to CSS's 'margin' property,
with the four values indicating the amount the top, right, bottom, and left edges, respectively, are offset by,
with positive lengths indicating an outward offset.
Percentages are resolved relative to the width of the undilated rectangle.

<b>These offsets are only applied when handling <a>same-origin-domain targets</a>;
for <a>cross-origin-domain targets</a> they are ignored.</b>

Note: {{IntersectionObserver/scrollMargin}} affects the clipping of <a for="IntersectionObserver">target</a>
by all scrollable ancestors up to and including the <a>intersection root</a>.
Both the {{IntersectionObserver/scrollMargin}} and the {{IntersectionObserver/rootMargin}}
are applied to a scrollable <a>intersection root's</a> rectangle.
Note: {{IntersectionObserver/scrollMargin}} affects the clipping of <a for="IntersectionObserver">target</a>
by all scrollable ancestors up to and including the <a>intersection root</a>.
Both the {{IntersectionObserver/scrollMargin}} and the {{IntersectionObserver/rootMargin}}
are applied to a scrollable <a>intersection root's</a> rectangle.

Note: <a>Root intersection rectangle</a> and <a>scrollport</a> intersection rectangles are not affected by
<a>pinch zoom</a> and will report the unadjusted <a>viewport</a>, consistent with the
Expand Down Expand Up @@ -674,7 +677,7 @@ run these steps:
the <a>browsing context container</a> of |container|.
2. Map |intersectionRect| to the coordinate space of |container|.
3. If |container| is a <a>scroll container</a>, apply the {{IntersectionObserver}}’s
{{[[scrollMargin]]}} to the |container|'s clip rect.
{{[[scrollMargin]]}} to the |container|'s clip rect as described in <a>apply scroll margin to a scrollport</a>.
4. If |container| has a <a>content clip</a> or a css <a>clip-path</a> property,
update |intersectionRect| by applying |container|'s clip.
5. If |container| is the root element of a <a>browsing context</a>,
Expand Down

0 comments on commit a47c2fc

Please sign in to comment.