Skip to content

[cssom-view-1] Add container option to scrollIntoView options. #11673

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.

Sign up for GitHub

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

Merged
merged 2 commits into from
Feb 7, 2025
Merged

[cssom-view-1] Add container option to scrollIntoView options. #11673

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
db62d4a
[cssom-view-1] Add container option to scrollIntoView options.
flackr Feb 7, 2025
44caf59
Update cssom-view-1/Overview.bs
tabatkins Feb 7, 2025
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
52 changes: 31 additions & 21 deletions cssom-view-1/Overview.bs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1166,8 +1166,11 @@ enum ScrollLogicalPosition { "start", "center", "end", "nearest" };
dictionary ScrollIntoViewOptions : ScrollOptions {
ScrollLogicalPosition block = "start";
ScrollLogicalPosition inline = "nearest";
ScrollIntoViewContainer container = "all";
};

enum ScrollIntoViewContainer { "all", "nearest" };

dictionary CheckVisibilityOptions {
boolean checkOpacity = false;
boolean checkVisibilityCSS = false;
Expand Down Expand Up @@ -1291,16 +1294,19 @@ The <dfn method for=Element caniuse=scrollintoview>scrollIntoView(<var>arg</var>
1. Let <var>behavior</var> be "<code>auto</code>".
1. Let <var>block</var> be "<code>start</code>".
1. Let <var>inline</var> be "<code>nearest</code>".
1. Let <var>container</var> be <code>null</code>.
1. If <var>arg</var> is a {{ScrollIntoViewOptions}} dictionary, then:
1. Set <var>behavior</var> to the {{ScrollOptions/behavior}} dictionary member of <var>options</var>.
1. Set <var>block</var> to the {{ScrollIntoViewOptions/block}} dictionary member of <var>options</var>.
1. Set <var>inline</var> to the {{ScrollIntoViewOptions/inline}} dictionary member of <var>options</var>.
1. If the {{ScrollIntoViewOptions/container}} dictionary member of <var>options</var>,
set <var>container</var> to this element.
Comment on lines +1302 to +1303
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this is missing some words.

1. Otherwise, if <var>arg</var> is false, then set <var>block</var> to "<code>end</code>".
1. If the element does not have any associated [=CSS/box=],
or is not available to user-agent features,
then return.
1. <a lt='scroll a target into view'>Scroll the element into view</a>
with <var>behavior</var>, <var>block</var>, and <var>inline</var>.
with <var>behavior</var>, <var>block</var>, <var>inline</var>, and <var>container</var>.
1. Optionally perform some other action that brings the element to the user's attention.

The <dfn method for=Element lt="scroll(options)|scroll(x, y)">scroll()</dfn> method must run these steps:
Expand Down Expand Up @@ -1513,26 +1519,30 @@ run the following steps:
To <dfn export>scroll a target into view</dfn> <var>target</var>, which is an <a for="/">Element</a>, [=pseudo-element=], or <a>Range</a>,
with a scroll behavior <var>behavior</var>,
a block flow direction position <var>block</var>,
and an inline base direction position <var>inline</var>,
means to run these steps for each ancestor element or <a>viewport</a> that establishes
a <a>scrolling box</a> <var>scrolling box</var>, in order of innermost to outermost <a>scrolling box</a>:

1. If the {{Document}} associated with <var>target</var> is not <a>same origin</a> with the {{Document}} associated with the element or <a>viewport</a> associated with <var>scrolling box</var>, terminate these steps.
1. Let <var>position</var> be the scroll position resulting from running the steps to <a>determine the scroll-into-view position</a> of <var>target</var> with <var>behavior</var> as the |scroll behavior|,
<var>block</var> as the |block flow position|, <var>inline</var> as the |inline base direction position| and <var>scrolling box</var> as the |scrolling box|.
1. If <var>position</var> is the same as <var>scrolling box</var>'s current scroll position, and <var>scrolling box</var> does not have an ongoing <a>smooth scroll</a>, then return.
1. <dl class=switch>
<dt>If <var>scrolling box</var> is associated with an element
<dd>
<a for="/">Perform a scroll</a> of the element's <var>scrolling box</var> to <var>position</var>, with the element as the associated element and
<var>behavior</var> as the scroll behavior.
<dt>If <var>scrolling box</var> is associated with a <a>viewport</a>
<dd>
1. Let <var>document</var> be the <a>viewport’s</a> associated {{Document}}.
1. Let <var>root element</var> be <var>document</var>'s [=root element=], if there is one, or null otherwise.
1. <a for="viewport">Perform a scroll</a> of the <a>viewport</a> to <var>position</var>, with <var>root element</var> as the associated element and <var>behavior</var>
as the scroll behavior.
</dl>
an inline base direction position <var>inline</var>,
and an optional containing <a>Element</a> to stop scrolling after reaching <var>container</var>,
means to run these steps:

1. For each ancestor element or <a>viewport</a> that establishes a <a>scrolling box</a> <var>scrolling box</var>,
in order of innermost to outermost <a>scrolling box</a>, run these substeps:
1. If the {{Document}} associated with <var>target</var> is not <a>same origin</a> with the {{Document}} associated with the element or <a>viewport</a> associated with <var>scrolling box</var>, terminate these steps.
1. Let <var>position</var> be the scroll position resulting from running the steps to <a>determine the scroll-into-view position</a> of <var>target</var> with <var>behavior</var> as the |scroll behavior|,
<var>block</var> as the |block flow position|, <var>inline</var> as the |inline base direction position| and <var>scrolling box</var> as the |scrolling box|.
1. If <var>position</var> is not the same as <var>scrolling box</var>'s current scroll position, or <var>scrolling box</var> has an ongoing <a>smooth scroll</a>,
1. <dl class=switch>
<dt>If <var>scrolling box</var> is associated with an element
<dd>
<a for="/">Perform a scroll</a> of the element's <var>scrolling box</var> to <var>position</var>, with the element as the associated element and
<var>behavior</var> as the scroll behavior.
<dt>If <var>scrolling box</var> is associated with a <a>viewport</a>
<dd>
1. Let <var>document</var> be the <a>viewport’s</a> associated {{Document}}.
1. Let <var>root element</var> be <var>document</var>'s [=root element=], if there is one, or null otherwise.
1. <a for="viewport">Perform a scroll</a> of the <a>viewport</a> to <var>position</var>, with <var>root element</var> as the associated element and <var>behavior</var>
as the scroll behavior.
</dl>
1. If <var>container</var> is not null and <var>scrolling box</var> is a [=shadow-including inclusive ancestor=] of <var>container</var>,
abort the rest of these steps.

</div>

Expand Down