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

Add initial scroll position hook to HTML spec #10759

Open
wants to merge 8 commits into
base: main
Choose a base branch
from
+70 −0
Open

Add initial scroll position hook to HTML spec #10759

Changes from 5 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
ece2224
Add initial scroll position hook to HTML spec
Nov 12, 2024
b5b44c8
Fix indentation; improve references & links
Nov 14, 2024
ae81ba7
Fix step placement
Nov 15, 2024
dd852fe
Poll scroll containers separately and repeatedly
Dec 2, 2024
abee623
Add initial scroll position hook to html spec.
Dec 6, 2024
2ecc9aa
Specify shadow-including order and note difference in scrolling goals
Dec 9, 2024
df3e496
Position note aobut recursion better
Dec 9, 2024
1f28b52
Tweaks, mostly wrapping
domenic Dec 10, 2024
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
56 changes: 56 additions & 0 deletions source
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3904,6 +3904,8 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
<li>The <dfn data-x-href="https://drafts.csswg.org/css-overflow/#propdef-overflow">'overflow'</dfn> property and its <dfn data-x-href="https://drafts.csswg.org/css-overflow/#valdef-overflow-hidden">'hidden'</dfn> value</li>
<li>The <dfn data-x-href="https://drafts.csswg.org/css-overflow/#propdef-text-overflow">'text-overflow'</dfn> property</li>
<li>The term <dfn data-x-href="https://drafts.csswg.org/css-overflow/#scroll-container">scroll container</dfn>
<li>The term <dfn data-x-href="https://drafts.csswg.org/css-overflow/#initial-scroll-position">initial scroll position</dfn>
<li>The term <dfn data-x-href="https://drafts.csswg.org/css-overflow/#scrollable-overflow-rectangle">scrollable overflow rectangle</dfn>
</ul>

<p>The following terms and features are defined in <cite>CSS Positioned Layout</cite>:
Expand Down Expand Up @@ -4055,6 +4057,8 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
<li>The <dfn data-x="event-scroll" data-x-href="https://drafts.csswg.org/cssom-view/#eventdef-document-scroll"><code>scroll</code></dfn> event</li>
<li>The <dfn data-x="event-scrollend" data-x-href="https://drafts.csswg.org/cssom-view/#eventdef-document-scrollend"><code>scrollend</code></dfn> event</li>
<li><dfn data-x-href="https://drafts.csswg.org/cssom-view/#set-up-browsing-context-features">set up browsing context features</dfn></li>
<li>The term <dfn data-x-href="https://drafts.csswg.org/cssom-view/#perform-a-scroll">perform a scroll</dfn></li>
<li>The term <dfn data-x-href="https://drafts.csswg.org/cssom-view/#scrolling-box">scrolling box</dfn></li>
</ul>

<p>The following features and terms are defined in <cite>CSS Syntax</cite>:
Expand Down Expand Up @@ -103722,6 +103726,9 @@ location.href = '#foo';</code></pre>
<p>If <var>documentIsNew</var> is true, then:

<ol>
<li><p><span>Update the initial scroll positions for scroll containers</span> in
<var>document</var>.</p></li>

<li><p><span>Try to scroll to the fragment</span> for <var>document</var>.</p></li>

<li><p>At this point <dfn>scripts may run for the newly-created document</dfn>
Expand Down Expand Up @@ -103879,6 +103886,54 @@ location.href = '#foo';</code></pre>
</li>
</ol>

<p>To <dfn>update the initial scroll positions for scroll containers</dfn> in a
<code>Document</code> <var>document</var>:</p>

DavMila marked this conversation as resolved.
Show resolved Hide resolved
<ol>
<li><p>Let <var>scrollers</var> be a <span>list</span> of every element which is a
domenic marked this conversation as resolved.
Show resolved Hide resolved
<span data-x="shadow-including descendant">shadow-including descendant</span> of
DavMila marked this conversation as resolved.
Show resolved Hide resolved
<var>document</var> and establishes a <span
data-x="scrolling box">scrolling box</span>.</p></li>
DavMila marked this conversation as resolved.
Show resolved Hide resolved

DavMila marked this conversation as resolved.
Show resolved Hide resolved
<li>
<p><span data-x="list iterate">For each</span> <var>scroller</var> of
<var>scrollers</var>, in <span>tree order</span>:</p>
DavMila marked this conversation as resolved.
Show resolved Hide resolved

<ol>
<li><p><span>Update the initial scroll position</span> for <var>scroller</var>.</p></li>
</ol>
</li>
DavMila marked this conversation as resolved.
Show resolved Hide resolved
</ol>
DavMila marked this conversation as resolved.
Show resolved Hide resolved

<p>To <dfn>update the initial scroll position</dfn> for an element <var>scroller</var>,
perform the following steps <span>in parallel</span>:</p>

<ol>
<li><p>Wait for an <span>implementation-defined</span> amount of time. (This is intended to allow
the user agent to optimize the user experience in the face of performance concerns.)</p></li>

<li>
<p><span>Queue a global task</span> on the <span>navigation and traversal task source</span>
given <var>document</var>'s <span>relevant global object</span> to run these steps:</p>

<ol>
<li><p>If the user agent has reason to believe the user is no longer interested in scrolling
to the <span data-x="initial scroll position">initial scroll position</span> of the
<span>scrollable overflow rectangle</span> of <var>scroller</var>'s <span>scrolling box</span>,
then abort these steps.</p></li>

<li><p>Let <var>position</var> be the <span data-x="initial scroll position">initial scroll
DavMila marked this conversation as resolved.
Show resolved Hide resolved
position</span> of the <span>scrollable overflow rectangle</span> of <var>scroller</var>'s
<span>scrolling box</span>.</p></li>

Copy link
Member

Choose a reason for hiding this comment

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

This always calls itself recursively. That doesn't seem right... it seems like the first time you succeed, you should stop looping.

Copy link
Author

Choose a reason for hiding this comment

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

Thanks for calling this out. The idea is for user agents to keep scrollers scrolled to their initial scroll position until some user action indicates otherwise. Since style properties can change the initial scroll position, we need to keep re-evaluating the initial scroll position until such a user action has taken place. I think that, in practice, this re-evaluating of the initial scroll position will simply lead to a noop most of the time.
Also, this is pretty much what user agents should already do with properties like align-content. You can see in this demo (which, unfortunately, only works in Safari at the moment) that as messages are loaded, the scroll position needs to be updated to keep the first message scrolled to, which is what align-content: end is used for here. As soon as the user scrolls, the scroll container is no longer kept at the initial scroll position.

Copy link
Member

Choose a reason for hiding this comment

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

I see. So this is fairly different from the "try to scroll to a fragment" case, where we continue until the fragment is loaded; instead, we need to actively continue, possibly forever. Very interesting!

Let's summarize this in a <p class="note"> after "update the initial scroll position". Something like:

Although [try to scroll to the fragment] and [update the initial scroll position for scroll containers] take place at the same point, and both use a polling system to periodically re-attempt the scrolling, their goals are different. [Try to scroll to the fragment] polls repeatedly until the [indicated part] of the document is found, since it may take a while for the element to show up during the document load. [Update the initial scroll positions for scroll containers] does not have such a finish condition; it can run indefinitely, as long as the user does not indicate disinterest. This is necessary to achieve the desired behavior of keeping a [scroll container] "snapped" to the position indicated by certain CSS properties.

Please feel free to improve my wording; that's just my best understanding so far!

Copy link
Author

Choose a reason for hiding this comment

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

Thanks, I think your note summarizes it quite well, Done.

<li><p><span data-x="perform a scroll">Perform a scroll</span> of <var>scroller</var>'s <span
data-x="scrolling box">scrolling box</span> to <var>position</var>, with <var>scroller</var>
as the associated element.</p></li>

<li><p><span>Update the initial scroll position</span> for <var>scroller</var>.</p></li>
</ol>
</ol>

<p>To <dfn export>make document unsalvageable</dfn>, given a <code>Document</code>
<var>document</var> and a string <var>reason</var>:</p>

Expand Down Expand Up @@ -145050,6 +145105,7 @@ INSERT INTERFACES HERE
Dave Singer,
Dave Tapuska,
Dave Townsend<!-- Mossop on moz irc -->,
David Awogbemila,
David Baron,
David Bloom,
David Bokan,
Expand Down