w3c / csswg-drafts

CSS Working Group Editor Drafts
https://drafts.csswg.org/
Other
4.5k stars 661 forks source link

[css-overflow-5] What is the active :checked marker when some markers point to elements within different scrolling containers? #11098

Open flackr opened 1 week ago

flackr commented 1 week ago

With <a> elements, it is possible to link to any content anywhere on the page. This means that we can create a scroll marker group where multiple markers might be respectively active. E.g.

Nested scrollers might be used within sections of contents:

<div focusgroup>
  <ol>
    <li><a href="#s1">Section 1</a>
      <ol>
        <li><a href="#s1_1">Subsection 1</a></li>
      </ol>
    </li>
    <li><a href="#s2">Section 2</a>
      <ol>
        <li><a href="#s2_1">Subsection 1</a></li>
      </ol>
    </li>
  </ol>
</div>
<h1 id="s1">Section 1</h1>
<div class="scroller">
  <h2 id="s1_1">Subsection 1</h2>
</div>

Sibling / cousin scrollers (I'm less sure of the use case but it would need a defined behavior):

<div focusgroup>
  <ol>
    <li><a href="#i1">Item 1</a></li>
    <li><a href="#i2">Item 2</a></li>
  </ol>
</div>
<div class="scroller">
  <h1 id="i1">Item 1</h2>
</div>
<div class="scroller">
  <h1 id="i2">Item 2</h2>
</div>

In both of these cases there are many scroll markers which could be said to be :checked as their nearest ancestor scrolling element is currently scrolled to them.

flackr commented 1 week ago

I think to handle this in a general way we should find the common ancestor scrolling container (and tree of contained scrolling containers) of all of the scroll markers in the group, and then work from the top-down to first find the active scroller, then repeat within that until you arrive at a particular marker.

flackr commented 1 week ago

To make this proposal more concrete. The proposed way to select the active marker among targets in different scrolling containers is as follows:

Define/share an algorithm for determining the active target for a list of targets in a single scroller (which as discussed in #10917 will for now will be a bit flexible), To determine the active marker, we start from the root (or the nearest ancestor scrolling container) S. Then

  1. Let targets be all of the scroll targets whose scrolling container is S, and all of the scroll containers within S which have descendent scroll targets.
  2. Find the active target T amongst targets in S.
  3. If T is not a scroll target, let S = T and repeat from step 1.
  4. Return T as the active target.

This defines reasonable behavior that ensures a target is only active if all of its ancestor scrolling containers to the common ancestor scroll container are also in a position to be considered active (i.e. onscreen and more closely aligned than other targets).