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.

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

Jump to bottom

[css-scroll-snap-2] Specify scroll-start-target #10227

Open
wants to merge 6 commits into
base: main
Choose a base branch
from
Open

[css-scroll-snap-2] Specify scroll-start-target #10227

Changes from 1 commit
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
f6b134a
Specify scroll-start-target
DavMila Apr 18, 2024
994d0d1
[css-scroll-snap-2]] Specify scroll-start-target
Apr 26, 2024
a89bcc3
[css-scroll-snap-2] Specify scroll-start-target
May 16, 2024
d735c93
[css-scroll-snap-2] Specify scroll-start-target
May 16, 2024
9826f6f
[css-scroll-snap-2] Specify scroll-start-target
Jun 4, 2024
b178565
Merge branch 'main' into scroll-start-target
DavMila Jun 4, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
164 changes: 111 additions & 53 deletions css-scroll-snap-2/Overview.bs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -193,26 +193,117 @@ The 'scroll-start' property {#scroll-start}
The 'scroll-start-target' property {#scroll-start-target}
-------------------------------------------

<pre class="propdef shorthand">
Name: scroll-start-target
Value: [ none | auto ]{1,2}
</pre>

This property is a shorthand property that sets all of the scroll-start-target-* longhands in one declaration.
The first value defines the scroll starting point in the block axis,
the second sets it in the inline axis.
If the second value is omitted, it defaults to ''none''.

Values are defined as follows:

<dl dfn-type=value dfn-for="scroll-start-target, scroll-start-target-x, scroll-start-target-y, scroll-start-target-block, scroll-start-target-inline">
<dt><dfn>none</dfn>
<dd>Element is not a ''scroll-start-target''.
<dt><dfn>auto</dfn>
<dd>Element is used to calculate the ''scroll-start'' position,
taking into account ''scroll-padding'' or ''scroll-margin'' ,
same as a ''scroll-snap'' target.
</dl>
<h4 id="initial-scroll-target">Initial scroll target</h4>

The <dfn>initial scroll target</dfn> of a <a>scroll container</a> |scrollcontainer|
with respect to a particular axis is an element or pseudo-element whose {{scroll-start-target}}
DavMila marked this conversation as resolved.
Show resolved Hide resolved
property for that axis is non-''none'' and whose nearest <a>scroll container</a> is
|scrollcontainer|. Where multiple such elements or pseudo-elements exist, user-agents
should select the one which comes first in <a href="https://www.w3.org/TR/dom/#concept-tree-order">tree order</a>. Where no such element
or pseudo-element exists, |scrollcontainer|’s <a>initial scroll target</a> in
that axis is null.
DavMila marked this conversation as resolved.
Show resolved Hide resolved

Except for [[#cases-where-scroll-start-target-is-inactive|cases where scroll-start-target is inactive]],
DavMila marked this conversation as resolved.
Show resolved Hide resolved
user-agents should use the <a>initial scroll target</a> for a <a>scroll container</a> |scrollcontainer|
to determine the <a>initial scroll position</a> of |scrollcontainer| along each
DavMila marked this conversation as resolved.
Show resolved Hide resolved
axis by running the steps to <a>apply initial scroll targets</a>

The steps to <dfn>apply initial scroll targets</dfn> for a <a>scroll container</a>
|scrollcontainer| are as follows:

1. Let |blocktarget| be the <a>initial scroll target</a> for |scrollcontainer| in the block axis.
1. Let |inlinetarget| be the <a>initial scroll target</a> for |scrollcontainer| in the inline axis.
1. If |blocktarget| is not null:
1. Set the <a>block axis</a> component of |scrollcontainer|’s <a>initial scroll position</a>
to the result of running the steps to <a>get initial scroll offset</a> for
|scrollcontainer| with the axis parameter as “block” and the target parameter
as |blocktarget|.
1. If |inlinetarget| is not null:
1. Set the <a>inline axis</a> component of |scrollcontainer|’s <a>initial scroll position</a>
to the result of running the steps to <a>get initial scroll offset</a> for
|scrollcontainer| with the axis parameter as “inline” and the target parameter
as |inlinetarget|.

The steps to <dfn>get initial scroll offset</dfn> for a <a>scroll container</a> |scrollcontianer|,
DavMila marked this conversation as resolved.
Show resolved Hide resolved
given axis |axis| (which is either “block” or “inline”) and target |target| are as follows:

1. Let |alignment| be ''start''.
1. If |axis| is "block":
1. If the value of |target|'s [[css-scroll-snap-1#scroll-snap-align|scroll-snap-align]]
property along the block axis is not ''none'':
1. Let |alignment| be the value of |target|'s [[css-scroll-snap-1#scroll-snap-align|scroll-snap-align]]
property along the block axis.
1. Return the nearest <a>scroll offset</a> that aligns |scrollcontainer| with
|target| along the block axis according to |alignment|.
1. Otherwise:
1. If the value of |target|'s [[css-scroll-snap-1#scroll-snap-align|scroll-snap-align]]
property along the inline axis is not ''none'':
1. Let |alignment| be the value of |target|'s [[css-scroll-snap-1#scroll-snap-align|scroll-snap-align]]
property along the inline axis.
1. Return the nearest <a>scroll offset</a> that aligns |scrollcontainer| with
|target| along inline axis according to |alignment|.

<h4 id="scroll-start-target-longhands">Longhands</h4>

<pre class="propdef">
Name: scroll-start-target-block, scroll-start-target-inline, scroll-start-target-x, scroll-start-target-y
Value: auto | none
Initial: none
Applies to: all elements
Inherited: no
Logical property group: scroll-start-target
Percentages: n/a
Computed Value: either of the keywords "none" or "auto"
Animation type: not animatable
</pre>

{{scroll-start-target-block}} and {{scroll-start-target-inline}} specify the
{{scroll-start-target}} values for the block and inline axis respectively.
{{scroll-start-target-y}} and {{scroll-start-target-x}} specify the
{{scroll-start-target}} values for the vertical and horizontal axis respectively.

<dl dfn-type=value dfn-for="scroll-start-target, scroll-start-target-x, scroll-start-target-y, scroll-start-target-block, scroll-start-target-inline">
<dt><dfn>none</dfn>
<dd>Element is not a ''scroll-start-target'' in the relevant axis.
<dt><dfn>auto</dfn>
<dd>Element is a ''scroll-start-target'' and is used to determine the
<a>initial scroll position</a> of its nearest ancestor <a>scroll container</a>
</dl>

<h4 id="scroll-start-target-shorthand">The scroll-start-target shorthand</h4>

{{scroll-start-target}} is a shorthand property that sets all of the scroll-start-target-*
longhands in one declaration. The first value defines the <a>initial scroll position</a>
in the block axis, and the second sets it in the inline axis. If the second value
is omitted, it is the same as the specified first value.

<pre class="propdef shorthand">
Name: scroll-start-target
Value: [ none | auto ]{1,2}
Initial: ''none''
Applies to: all elements
Inherited: no
Percentages: N/A
Computed Value: see individual properties
Animation type: none
</pre>

Values are for the {{scroll-start-target}} shorthand have the same definitions
as values for the [[#scroll-start-target-longhands|longhands]].

<h4 id="scroll-start-target-with-place-content">Interaction with <a>place-content</a></h4>

If the <a>initial scroll position</a> indicated by <a spec="css-align" lt="place-content">place-content</a> differs
from that indicated by {{scroll-start-target}}, user-agents should give preference
to the latter.
DavMila marked this conversation as resolved.
Show resolved Hide resolved

<h4 id="cases-where-scroll-start-target-is-inactive">Cases where scroll-start-target is inactive</h4>

<h5 id="scroll-start-fragment-navigation">Fragment Navigation</h5>

If an element within the <a>scrollable overflow area</a> of a <a>scroll container</a> is the
document’s “:target”, {{scroll-start-target}} is inactive for that <a>scroll container</a>.


Styling Snapped Items {#todo}
=============================
Expand Down Expand Up @@ -567,37 +658,4 @@ Flow-relative Longhands for 'scroll-start' {#scroll-start-longhands-logical}
Animation type: by computed value type
</pre>

...
Flow-relative Longhands for 'scroll-start-target' {#scroll-start-target-longhands-logical}
--------------------------------------------------------------------------

<pre class="propdef">
Name: scroll-start-target-block, scroll-start-target-inline
Value: auto | none
Initial: none
Applies to: all elements
Inherited: no
Logical property group: scroll-start-target
Percentages: n/a
Computed Value: either of the keywords "none" or "auto"
Animation type: not animatable
</pre>

...

Physical Longhands for 'scroll-start-target' {#scroll-start-target-longhands-physical}
----------------------------------------------------------------------

<pre class="propdef">
Name: scroll-start-target-x, scroll-start-target-y
Value: none | auto
Initial: none
Applies to: all elements
Inherited: no
Logical property group: scroll-start-target
Percentages: n/a
Computed value: either of the keywords "none" or "auto"
Animation type: not animatable
</pre>

...