Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Clarify scrollMargin details #515

Merged
merged 1 commit into from
Sep 29, 2023
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
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
Loading