Skip to content

[css-overflow-5] Add an example for 'scroll-target-group' property #12449

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.

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
Jul 4, 2025

Conversation

danielsakhapov
Copy link
Contributor

As requested in Intent to Ship thread:
https://groups.google.com/a/chromium.org/g/blink-dev/c/R_VD_FkYrF8/m/XDzix9lbAwAJ adding an example to show how to use 'scroll-target-group' property to highlight the currently visible chapter within a table of contents.

As requested in Intent to Ship thread:
https://groups.google.com/a/chromium.org/g/blink-dev/c/R_VD_FkYrF8/m/XDzix9lbAwAJ
adding an example to show how to use 'scroll-target-group' property to
highlight the currently visible chapter within a table of contents.
@danielsakhapov danielsakhapov requested a review from flackr July 4, 2025 12:05
Copy link
Contributor

@flackr flackr left a comment

Choose a reason for hiding this comment

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

Looks good but I left some suggestions to make it a bit more concise.

color: blue;
display: block;
padding: 10px;
text-decoration: none;
Copy link
Contributor

@flackr flackr Jul 4, 2025

Choose a reason for hiding this comment

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

not necessary but for the purposes of an example you could probably skip most of this styling, i.e.

  1. display: block isn't necessary if the links are in a block element, commonly table of contents are a <ul> or <ol> with <li> wrapping each of the links (the structure of the spec table of contents itself).
  2. Links are normally blue anyways right?
  3. In a structured list, padding wouldn't be necessary on the link tag.
  4. Hiding the link text decoration seems like an optional thing.

TLDR I think you should remove this block completely, change #toc to an <ol> element and wrap each of the <a> elements in a <li>.

Updated: Sorry my comment got a bit mangled but it looks like you got it :-)

@danielsakhapov danielsakhapov merged commit eb4e1f7 into w3c:main Jul 4, 2025
1 check passed
@danielsakhapov danielsakhapov deleted the scroll_target_group_example branch July 4, 2025 13:57
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants