0
代码
代码
Issues
Pull Requests
讨论
Wiki
分析
0
ohci1ohci1add
910e62b5创建于 1月15日历史提交
<!--
@BLINK-ALLOW:setSize*
@BLINK-ALLOW:posInSet*
@BLINK-ALLOW:focusable*
@WAIT-FOR:Done
-->
<!doctype html>

<style>
.carousel {
  overflow: auto;
  columns: 1;
  height: 200px;
  /* open-quote and close-quote in scroll-marker content below refer to these quotes */
  quotes: "<<" ">>";

  scroll-marker-group: after;

  /* Scroll marker group is generated on the .carousel element */
  &::scroll-marker-group {
    height: 1rem;
    width: 100%;
    text-align: center;
  }

  /* These are div items children within the carousel */
  & > div {
    height: 100%;
    counter-increment: c;

    /* Request a scroll marker for this element by setting non-none content */
    &::scroll-marker {
      display: inline-block;
      width: 1rem;
      height: 1rem;
      border: 1px solid black;
    }
    /* The currently selected scroll marker should be blue */
    &::scroll-marker:target-current {
      background: blue;
    }
  }
}
#one::scroll-marker {
  content: 'content' / 'alt text name';
}
#two::scroll-marker {
  content: open-quote "content text name" linear-gradient(green, blue) counter(c);
}
#three::scroll-marker {
  content: ''; /* name should be used from the scroll target */
}
#four::scroll-marker {
  content: ''; /* no name */
}
</style>

<div class=carousel>
  <div id=one aria-label="one">One</div>
  <div id=two aria-label="two">Two</div>
  <div id=three aria-label="scroll target name">Three</div>
  <div id=four>Four</div>
</div>

<script>
onload = () => {
  requestAnimationFrame(() => requestAnimationFrame(() => {
    document.title = 'Done';
  }));
};
</script>