Skip to content

Commit a47c2fc

Browse files
committed
Clarify scrollMargin details
1 parent f22fbf4 commit a47c2fc

1 file changed

Lines changed: 17 additions & 14 deletions

File tree

index.bs

Lines changed: 17 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -288,8 +288,6 @@ interface IntersectionObserver {
288288
::
289289
Offsets are applied to <a>scrollports</a> on the path from <a>intersection root</a> to <a for="IntersectionObserver">target</a>,
290290
effectively growing or shrinking the clip rects used to calculate intersections.
291-
<b>These offsets are only applied when handling <a>same-origin-domain targets</a>;
292-
for <a>cross-origin-domain targets</a> they are ignored.</b>
293291

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

344-
When calculating a <a>scrollport</a> intersection rectangle for
345-
a <a>same-origin-domain target</a>, the rectangle is expanded
346-
according to the offsets in the {{IntersectionObserver}}’s {{[[scrollMargin]]}} slot
347-
in a manner similar to CSS's 'margin' property,
348-
with the four values indicating the amount the top, right, bottom, and left edges, respectively, are offset by,
349-
with positive lengths indicating an outward offset.
350-
Percentages are resolved relative to the width of the undilated rectangle.
342+
: To <dfn>apply scroll margin to a scrollport</dfn>
343+
::
344+
When calculating a <a>scrollport</a> intersection rectangle for
345+
a <a>same-origin-domain target</a>, the rectangle is expanded
346+
according to the offsets in the {{IntersectionObserver}}’s {{[[scrollMargin]]}} slot
347+
in a manner similar to CSS's 'margin' property,
348+
with the four values indicating the amount the top, right, bottom, and left edges, respectively, are offset by,
349+
with positive lengths indicating an outward offset.
350+
Percentages are resolved relative to the width of the undilated rectangle.
351+
352+
<b>These offsets are only applied when handling <a>same-origin-domain targets</a>;
353+
for <a>cross-origin-domain targets</a> they are ignored.</b>
351354

352-
Note: {{IntersectionObserver/scrollMargin}} affects the clipping of <a for="IntersectionObserver">target</a>
353-
by all scrollable ancestors up to and including the <a>intersection root</a>.
354-
Both the {{IntersectionObserver/scrollMargin}} and the {{IntersectionObserver/rootMargin}}
355-
are applied to a scrollable <a>intersection root's</a> rectangle.
355+
Note: {{IntersectionObserver/scrollMargin}} affects the clipping of <a for="IntersectionObserver">target</a>
356+
by all scrollable ancestors up to and including the <a>intersection root</a>.
357+
Both the {{IntersectionObserver/scrollMargin}} and the {{IntersectionObserver/rootMargin}}
358+
are applied to a scrollable <a>intersection root's</a> rectangle.
356359

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

0 commit comments

Comments
 (0)