Overview.bs

<pre class='metadata'>
Title: CSS Scroll Snap Module Level 2
Group: csswg
Shortname: css-scroll-snap
Level: 2
Status: ED
Implementation Report: https://wpt.fyi/results/css/css-scroll-snap
Work Status: Testing
ED: https://drafts.csswg.org/css-scroll-snap-2/
Editor: Matt Rakow, Microsoft, w3cid 62267
Editor: Jacob Rossi, Microsoft, w3cid 45616
Editor: Tab Atkins-Bittner, Google, http://xanthir.com/contact/, w3cid 42199
Editor: Elika J. Etemad / fantasai, Apple, http://fantasai.inkedblade.net/contact, w3cid 35400
Editor: Adam Argyle, Google, https://nerdy.dev, w3cid 112669
Abstract: This module contains features to control panning and scrolling behavior with “snap positions”.
Status Text:
 A test suite and an implementation report will be produced during the
 CR period.
</pre>

Introduction {#intro}
=====================

	<em>This section is not normative.</em>

	<em>This is currently a draft spec over Scroll Snap 1.</em>

	Scroll experiences don't always start at the beginning. Interactions with
	carousels, swipe controls, and listviews often start somewhere in the middle,
	and each require JavaScript to set this position on page load.
	By enabling CSS to specify this scroll start position,
	both users, page authors and browsers benefit.

	In addition to setting an initial scroll position,
	developers need insights and events into Scroll Snap.
	Events like which element is snapped on which axis,
	when the snap event is changing,
	when snap completes and conveniences for
	snapping to children programmatically.

  First Layout
  ------------

  This event should follow the Animation code path. When animation objects are created and fire events, this is when a box has it's first layout.

<!--
████████ ██     ██    ███    ██     ██ ████████  ██       ████████  ██████
██        ██   ██    ██ ██   ███   ███ ██     ██ ██       ██       ██    ██
██         ██ ██    ██   ██  ████ ████ ██     ██ ██       ██       ██
██████      ███    ██     ██ ██ ███ ██ ████████  ██       ██████    ██████
██         ██ ██   █████████ ██     ██ ██        ██       ██             ██
██        ██   ██  ██     ██ ██     ██ ██        ██       ██       ██    ██
████████ ██     ██ ██     ██ ██     ██ ██        ████████ ████████  ██████
-->

Motivating Examples {#examples}
===============================

    <div class="example">
        A carousel that starts in the middle:

        <pre class="lang-css">
            .carousel {
                overflow-inline: auto;
                scroll-start: center;
            }
        </pre>

        <pre class="lang-html">
            &lt;div class="carousel">
                &lt;img src="img1.jpg">
                &lt;img src="img2.jpg">
                &lt;img src="img3.jpg">
                &lt;img src="img4.jpg">
                &lt;img src="img5.jpg">
            &lt;/div>
        </pre>

        <!-- <figure>
            <img src="images/element_snap_positions.png" alt="">

            <figcaption>
                The layout of the scroll container’s contents in the example.
                The snapport is represented by the red rectangle, and the snap area is represented by the yellow rectangle.  Since the scroll-snap-align is “center” in the inline (horizontal) axis, a snap position is established at each scroll position which aligns the X-center of the snapport (represented by a red dotted line) with the X-center of a snap area (represented by a yellow dotted line).
            </figcaption>
        </figure> -->
    </div>

    <div class="example">
        A search bar is available when the user scrolls back to the top:

        <pre class="lang-css">
            .scrollport {
                overflow-block: auto;
            }

            main {
                scroll-start-target: auto;
            }
        </pre>

        <pre class="lang-html">
            &lt;div class="scrollport">
                &lt;nav>
                    ...
                &lt;/nav>
                &lt;main>
                    ...
                &lt;/main>
            &lt;/div>
        </pre>

        <!-- <figure>
            <img src="images/element_snap_positions.png" alt="">

            <figcaption>
                The layout of the scroll container’s contents in the example.
                The snapport is represented by the red rectangle, and the snap area is represented by the yellow rectangle.  Since the scroll-snap-align is “center” in the inline (horizontal) axis, a snap position is established at each scroll position which aligns the X-center of the snapport (represented by a red dotted line) with the X-center of a snap area (represented by a yellow dotted line).
            </figcaption>
        </figure> -->
    </div>

Setting Where Scroll Starts {#properties-on-the-scroll-container}
=================================================================

<!-- BIG TEXT: SCROLL START -->

The 'scroll-start' property {#scroll-start}
-------------------------------------------

	<pre class="propdef shorthand">
	Name: scroll-start
	Value: [ auto | start | end | center | left | right | top | bottom | <<length-percentage [0,∞]>> ]{1,2}
	</pre>

	This property is a shorthand property that sets all of the scroll-start-* 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 ''scroll-start/start''. If ''scroll-start-target'' is set on any child, ''scroll-start'' is not used, in favor of using the element as the offset.

	Values are defined as follows:

	<dl dfn-type=value dfn-for="scroll-start, scroll-start-x, scroll-start-y, scroll-start-block, scroll-start-inline">
		<dt><dfn>auto</dfn>
		<dd>
			...

		<dt><dfn><<length-percentage [0,∞]>></dfn>
		<dd>
			...

			Negative values are invalid.
			Values corresponding to a length greater than the width/height of the scrollport
			are valid,
			but clamped to the width/height of the scrollport.

		<dt><dfn>start</dfn>
		<dt><dfn>center</dfn>
		<dt><dfn>end</dfn>
		<dd>
			Equivalent to ''0%'', ''50%'', and ''100%'', respectively.
	</dl>

<h4 id="display-none-behavior">Interaction with ''display: none'' and initial creation</h4>
  Same behavior that animations follow with <a href="#first-layout">first layout</a>.

<h4 id="slow-page-load-behavior">Slow page loading or document streaming behavior</h4>
  TODO

<h4 id="fragment-navigation-behavior">Interaction with ''fragment navigation''</h4>
  TODO
  If the scrollport has a in-page '':target'' via a URL fragment or a previous scroll position, then ''scroll-start'' is unused. Existing target logic should go unchanged. This makes ''scroll-start'' a soft request in the scroll position resolution routines.  

<h4 id="place-content-behavior">Interaction with ''place-content''</h4>
  TODO  
  Side note: While ''place-content'' can make a scroller appear to start in the center
  or end, no browser supports it and it appears complicated to resolve.

<h4 id="find-in-page-behavior">Interaction with "find in page"</h4>
  TODO

<h4 id="scroll-snap-container-behavior">Interaction ''scroll-snap'' containers</h4>
  This effectively will layout and start scroll at the snapped child, thus negating / cancelling ''scroll-start''. ''scroll-start'' will only work if nothing else has effected the scroll position.

<h4 id="nested-scrollers">Nested scrollers with ''scroll-start''</h4>
  Should follow patterns that scroll snap has set.

<h4 id="toggling-display-none">Interaction when ''display'' is toggled</h4>
  Same behavior that animations follow with ''first layout''.

<h4 id="rtl">Interaction with RTL and LTR</h4>
  Logical properties are offered for length offsets that should be flow relative. Furthermore, the ''end'' and ''start'' keywords are always logical.

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>

Styling Snapped Items {#todo}
=============================

The Snapped-element Pseudo-class: '':snapped'' {#snapped}
-------------------------------------------------------

The <dfn selector>:snapped</dfn> pseudo-class matches any scroll snap targets,
regardless of axis.
The longform physical and logical pseudo-class selectors
allow for more finite snapped children styling
as they can target an individual axis.

More specific options are defined as follows:

	<dl dfn-type=selector>
		<dt><dfn>:snapped-x</dfn>
		<dd>
			Matches the child snapped on the horizontal axis.

		<dt><dfn>:snapped-y</dfn>
		<dd>
			Matches the child snapped on the vertical axis.

		<dt><dfn>:snapped-inline</dfn>
		<dd>
			Matches the child snapped on the [=inline=] axis.

		<dt><dfn>:snapped-block</dfn>
		<dd>
			Matches the child snapped on the [=block=] axis.
	</dl>

Note: <a href="https://github.com/w3c/csswg-drafts/issues/6985#issuecomment-1049036401">Issue #6985</a><br>
Need to figure out resolution of the initial frame.

Snap Events {#snap-events}
===================

<!--
████████ ██     ██ ████████ ██    ██ ████████  ██████
██       ██     ██ ██       ███   ██    ██    ██    ██
██       ██     ██ ██       ████  ██    ██    ██
██████   ██     ██ ██████   ██ ██ ██    ██     ██████
██        ██   ██  ██       ██  ████    ██          ██
██         ██ ██   ██       ██   ███    ██    ██    ██
████████    ███    ████████ ██    ██    ██     ██████
-->

{{snapchanged}} and {{snapchanging}} {#snapchanged-and-snapchanging}
--------------------------------------------

	CSS scroll snap points are often used as a mechanism to
	create scroll interactive "selection" components,
	where selection is determined with JavaScript intersection observers
	and a scroll end guestimate. By creating a built-in event,
	the invisible state will become actionable,
	at the right time, and always correct.

	<table class="data" id="eventhandlers">
		<thead>
			<tr>
				<th>Event</th>
				<th>Interface</th>
				<th>Targets</th>
				<th>Description</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<th><dfn for="snapchanged" event>snapchanged</dfn></th>
				<td>{{SnapEvent}}</td>
				<td>scroll containers</td>
				<td>Fired at the scrolling element or {{Document}} at the end of a scroll (before a {{scrollend}} event)
					or after a <a href="https://drafts.csswg.org/css-scroll-snap-1/#re-snap">layout snap</a>
					if the element that the scrolling element or Document is snapped to changed.</td>
			</tr>
			<tr>
				<th><dfn for="snapchanging" event>snapchanging</dfn></th>
				<td>{{SnapEvent}}</td>
				<td>scroll containers</td>
				<td>Fired at the scrolling element or {{Document}} during scrolling (before a {{scroll}} event),
					if the element that the scrolling would cause the scroller to snap to is
					different from the target reported by the last snapchanging event that was fired.</td>
			</tr>
		</tbody>
	</table>

	<h4 for="snapchanged" id="snapchanged"> snapchanged </h4>
	{{snapchanged}} indicates that the snap area to which a snap container is snapped along either axis has changed.
	{{snapchanged}} is dispatched:

	<ol>
	<li>
		when a scrolling operation is <a spec="cssom-view-1" lt="scroll completed">completed</a>
		if, for either the block or inline axis, the
		element which the snap container is snapped to is different from the element
		it most recently snapped to in that axis. For snap containers with
		''scroll-snap-type/proximity'' strictness, the scroll may result in the snap
		container no longer being snapped to any element. [[css-scroll-snap-1#choosing]]
		describes the method a UA follows when choosing	between elements which are
		<a spec="css-scroll-snap-1" lt="scroll snap area">snap areas</a>.
	</li>
	<li> if there is a change to a snap container's style such that it goes from
		having a non-'none' value for [[css-scroll-snap-1#scroll-snap-type|scroll-snap-type]]
		to having a 'none' value or vice versa.
	</li>
	<li> if, after a [[css-scroll-snap-1#re-snap|layout change]], the element to
		which a snap container is snapped to changes, regardless of whether there is
		a change in scroll position after the layout change.
	</li>
	</ol>

	Scrolling operations always lead to {{scrollend}} events being fired. If a
	scrolling operation also results in a {{snapchanged}} event being fired, the
	{{snapchanged}} event should be fired before the {{scrollend}} event.

	Each {{Document}} has an associated list of
	<dfn export for=Document>pending snapchanged event targets</dfn>, initially empty.

	Each
	<a spec=css-scroll-snap lt="scroll snap container">snap container</a> has
	one <dfn export>snapchangedTargetBlock</dfn> and one
	<dfn export>snapchangedTargetInline</dfn> in the block and inline axes
	respectively, each of which can either be null if the container is not
	snapped in that axis or the {{Element}} to which the container is snapped.

	When asked to <dfn export for=Document>update snapchanged targets</dfn>
	for a <a spec=css-scroll-snap lt="scroll snap container">snap container</a>,
	|snapcontainer|, run these steps:

	1. Let <var>doc</var> be |snapcontainer|'s associated {{Document}}.
	1. Let <var>blockTarget</var> be the <a>snapchangedTargetBlock</a> associated
		with |snapcontainer|.
	1. Let <var>inlineTarget</var> be the <a>snapchangedTargetInline</a> associated
		with |snapcontainer|.
	1. Let <var>blockSnapchangingTarget</var> be the <a>snapchangingTargetBlock</a>
		associated with |snapcontainer|.
	1. Let <var>inlineSnapchangingTarget</var> be the
		<a>snapchangingTargetInline</a> associated with |snapcontainer|.
	1. Let <var>snap targets changed</var> be a boolean flag that is initially false.
	1. If <var>blockTarget</var> is not the same element as <var>blockSnapchangingTarget</var> or
		1. Set the <a>snapchangedTargetBlock</a> associated with |snapcontainer| to
			<var>blockSnapchangingTarget</var>.
		1. Set <var>snap targets changed</var> to true.
	1. If <var>inlineTarget</var> is not the same element as <var>inlineSnapchangingTarget</var>:
		1. Set the <a>snapchangedTargetInline</a> associated with |snapcontainer| to
			<var>inlineSnapchangingTarget</var>.
		1. Set <var>snap targets changed</var> to true.
	1. If <var>snap targets changed</var> is true:
		1. If |snapcontainer| is not already in <var>doc</var>'s
			<a>pending snapchanged event targets</a>:
			1. Append |snapcontainer| to <var>doc</var>'s
				<a>pending snapchanged event targets</a>.

	Note: When snapping occurs on a scroller (either due to a layout change or a
	scrolling operation) the <a>snapchangingTargetBlock</a> and <a>snapchangingTargetInline</a>
	associated with that scroller are updated and represent the current snap targets
	of that scroller. This allows the <a>update snapchanged targets</a> algorithm
	to use these elements to determine whether a {{snapchanged}} event should be fired.

	When asked to <dfn>dispatch pending snapchanged events</dfn> for a {{Document}},
		<var>doc</var>, run these steps:
	1. For each item <var>target</var> in |doc|'s <a>pending snapchanged event targets</a>:
		1. Fire a {{SnapEvent}}, |snapevent|, named {{snapchanged}} at <var>target</var>
			and let |snapevent|'s {{SnapEvent/snapTargetBlock}} and
			{{SnapEvent/snapTargetInline}} attributes be the <a>snapchangedTargetBlock</a> and the
			<a>snapchangedTargetInline</a>, respectively, that are associated with <var>target</var>.
	1. Empty <var>doc</var>'s <a>pending snapchanged event targets</a>.

	<h4 id="snapchanging"> snapchanging </h4>
	{{snapchanging}} is dispatched:
	* during a scrolling operation, if the element to which a
		 <a spec=css-scroll-snap lt="scroll snap container">snap container</a> would
		 <a spec="css-scroll-snap-1" lt="scroll snap">snap</a> (in either axis) changes, or
	* if a [[css-scroll-snap-1#re-snap|layout change]] occurs such that a {{snapchanged}} event
		 is to be dispatched. In this case, as with the scrolling case, the {{snapchanging}} event
		 should be dispatched before the {{snapchanged}} event.

	A scrolling operation might animate towards a particular position (e.g.
	scrollbar arrow clicks, arrow key presses, "behavior: smooth" programmatic
	scrolls) or might directly track a user's input (e.g. touch scrolling, scrollbar
	dragging). In either case, the user agent [[css-scroll-snap-1#choosing|chooses]] an
	<dfn>eventual snap target</dfn> in each axis to which the scroller will
	<a spec="css-scroll-snap-1" lt="scroll snap">snap</a> after the scrolling operation
	reaches its intended scroll position.
	* In the former case, the intended scroll position is the scroll animation's
		 target scroll offset.
	* In the latter case, the intended scroll position is the current scroll offset as
		 determined by the user's input.

	{{snapchanging}} aims to let the web page know, as early as possible,
	that the scrolling operation will result in a change in the element the snap
	container is snapped to. The user agent should evaluate whether to trigger
	{{snapchanging}} based on the	<a>eventual snap target</a> to which the scroller would
	<a spec="css-scroll-snap-1" lt="scroll snap">snap</a> were the scrolling operation
	to reach its intended scroll position.

	Note: Since snapchanging gives the web page hints about future snapping,
	the snapping hinted at by a snapchanging event might not materialize since it
	will be possible for subsequent scrolling input to further alter the snap
	container's scroll position and result in a different eventual snap target.


	{{snapchanging}} events are fired before {{scroll}} events.

	Each {{Document}} has an associated list of
	<dfn export for=Document>pending snapchanging event targets</dfn>, initially empty.

	Each
	<a spec=css-scroll-snap lt="scroll snap container">snap container</a> has
	one <dfn>snapchangingTargetBlock</dfn> 
	and one <dfn>snapchangingTargetInline</dfn>in the block and inline axes
	respectively, each of which can either be null if the container is not
	snapping in that axis or the {{Element}} to which the container is snapping.

	When asked to <dfn export for=Document>update snapchanging targets</dfn>
	for a <a spec=css-scroll-snap lt="scroll snap container">snap container</a>,
	|snapcontainer|, given an {{Element}} newBlockTarget and an {{Element}}
	newInlineTarget, run these steps:

	1. Let <var>doc</var> be |snapcontainer|'s associated {{Document}}.
	1. Let <var>blockTarget</var> be the <a>snapchangingTargetBlock</a> that is
		associated with |snapcontainer|.
	1. Let <var>inlineTarget</var> be the <a>snapchangingTargetInline</a> that is
		associated with |snapcontainer|.
	1. If <var>newBlockTarget</var> is not the same element as <var>blockTarget</var>:
		1. Set the <a>snapchangingTargetBlock</a> associated with |snapcontainer| to
			<var>newBlockTarget</var>.
		1. If |snapcontainer| is not already in <var>doc</var>'s
			<a>pending snapchanging event targets</a>,
			1. Append |snapcontainer| to <var>doc</var>'s
				<a>pending snapchanging event targets</a>
	1. If <var>newInlineTarget</var> is not the same element as <var>inlineTarget</var>:
		1. Set the <a>snapchangingTargetInline</a> associated with |snapcontainer| to
			<var>newInlineTarget</var>.
		1. If |snapcontainer| is not already in <var>doc</var>'s
			<a>pending snapchanging event targets</a>,
			1. Append |snapcontainer| to <var>doc</var>'s
				<a>pending snapchanging event targets</a>.

	When asked to <dfn>dispatch pending snapchanging events</dfn> for a {{Document}},
		<var>doc</var>, run these steps:
	1. For each item <var>target</var> in |doc|'s <a>pending snapchanging event targets</a>:
		1. Fire a {{SnapEvent}}, |snapevent|, named {{snapchanging}} at <var>target</var>
			and let |snapevent|'s {{SnapEvent/snapTargetBlock}} and
			{{SnapEvent/snapTargetInline}} attributes be the <a>snapchangingTargetBlock</a> and the
			<a>snapchangingTargetInline</a>, respectively, that are associated with <var>target</var>.
	1. Empty <var>doc</var>'s <a>pending snapchanging event targets</a>.

	<h4 id="snap-events-on-layout-changes">Snap Events due to Layout Changes </h4>
	When a <a spec=css-scroll-snap lt="scroll snap container">snap container</a>,
	|snapcontainer|, [[css-scroll-snap-1#re-snap|re-snaps]], run these steps:

	1. Let <var>newBlockTarget</var> be the element that |snapcontainer| has
		 <a spec="css-scroll-snap-1" lt="scroll snap">snapped</a>  to
		 in the block axis or null if it did not snap to any element.
	1. Let <var>newInlineTarget</var> be the element that |snapcontainer| has
		 <a spec="css-scroll-snap-1" lt="scroll snap">snapped</a> to
		 in the inline axis or null if it did not snap to any element.
	1. Run the steps to <a>update snapchanging targets</a> with <var>newBlockTarget</var>
		 as newBlockTarget and <var>newInlineTarget</var> as newInlineTarget.
	1. Run the steps to <a>update snapchanged targets</a> for |snapcontainer|.


SnapEvent interface
-------------------

<pre class="idl">
			dictionary SnapEventInit : EventInit {
				Node? snapTargetBlock;
				Node? snapTargetInline;
			};

			[Exposed=Window]
			interface SnapEvent : Event {
				constructor(DOMString type, optional SnapEventInit eventInitDict = {});
				readonly attribute Node? snapTargetBlock;
				readonly attribute Node? snapTargetInline;
			};
</pre>

<dl>
			<div dfn-type=attribute class=attributes dfn-for="SnapEvent">
		: <dfn>snapTargetBlock</dfn>
		::
			The element that the snap container is snapped to in the block axis
			at the <a spec="css-scroll-snap-1" lt="scroll snap position">snap position</a>
			for the associated snap event.
			</div>
			<div dfn-type=attribute class=attributes dfn-for="SnapEvent">
		: <dfn>snapTargetInline</dfn>
		::
			The element that the snap container is snapped to in the inline axis
			at the <a spec="css-scroll-snap-1" lt="scroll snap position">snap position</a>
			for the associated snap event.
			</div>

		For {{snapchanged}} events, the snap position is the position already
		realized by the snap container after a scroll snap. For {{snapchanging}}
		events it is the snap position that the snap container will eventually
		snap to when the scrolling operation ends.

	</dl>

	A {{SnapEvent}} should not bubble and should not be cancellable.
<!--
██        ███████  ██    ██  ██████   ██     ██    ███    ██    ██ ████████   ██████
██       ██     ██ ███   ██ ██    ██  ██     ██   ██ ██   ███   ██ ██     ██ ██    ██
██       ██     ██ ████  ██ ██        ██     ██  ██   ██  ████  ██ ██     ██ ██
██       ██     ██ ██ ██ ██ ██   ████ █████████ ██     ██ ██ ██ ██ ██     ██  ██████
██       ██     ██ ██  ████ ██    ██  ██     ██ █████████ ██  ████ ██     ██       ██
██       ██     ██ ██   ███ ██    ██  ██     ██ ██     ██ ██   ███ ██     ██ ██    ██
████████  ███████  ██    ██  ██████   ██     ██ ██     ██ ██    ██ ████████   ██████
-->

Appendix A: Longhands {#longhands}
==================================

The physical and logical longhands (and their shorthands)
interact as defined in [[!CSS-LOGICAL-1]].

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

	<pre class="propdef">
	Name: scroll-start-x, scroll-start-y
	Value: auto | start | end | center | <<length-percentage [0,∞]>>
	Initial: auto
	Applies to: <a>scroll containers</a>
	Inherited: no
	Logical property group: scroll-start
	Percentages: relative to the corresponding axis of the scroll container’s scrollport
	Computed value: the keyword ''scroll-start/auto'' or a computed <<length-percentage>> value
	Animation type: by computed value type
	</pre>

	...

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

	<pre class="propdef">
	Name: scroll-start-inline, scroll-start-block
	Value: auto | start | end | center | <<length-percentage [0,∞]>>
	Initial: auto
	Applies to: <a>scroll containers</a>
	Inherited: no
	Logical property group: scroll-start
	Percentages: relative to the corresponding axis of the scroll container’s scrollport
	Computed value: the keyword ''scroll-start/auto'' or a computed <<length-percentage>> value
	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>

	...