Add scroll-markers feature

[flackr]

No description provided.

[captainbrosset]

I'm having trouble understanding this. Would you mind giving me a practical example of how this might work/what this would look like? This would help me understand, and potentially propose a slight rewrite of this.

[flackr]

If you have chrome canary with experimental web platform features enabled, there are some great demos at:

• https://chrome.dev/carousel-configurator/ (turn on "Dot Navigation" switch) which shows the CSS used to produce the scroll markers, and
• https://chrome.dev/carousel/ which has many demos using scroll markers to create dots to navigate to particular targets.

As an example, the following creates a set of circular "markers" to scroll to each of the slides in a slideshow:

<style>
  .slides {
    overflow: auto;
    scroll-snap-type: x mandatory;
    white-space: nowrap;
    scroll-marker-group: after;
    counter-reset: slide-number;
  }
  .slide::scroll-marker {
    counter-increment: slide-number;
    content: counter(slide-number);
    border-radius: 50%;
    border: 1px solid black;
  }
}
</style>
<div class=slides>
  <div class=slide></div>
  <div class=slide></div>
  <div class=slide></div>
  <div class=slide></div>
  <div class=slide></div>
<div class=slideshow>

Here's a somewhat simple codepen trying to show the same: https://codepen.io/flackr/pen/MWMLPpP