scroll-target-group-003.html (1341B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Overflow Test: anchor scroll markers and pseudo element scroll markers</title> 4 <link rel="help" href="https://drafts.csswg.org/css-overflow-5/#scroll-target-group"> 5 <link rel="help" href="https://drafts.csswg.org/css-overflow-5/#scroll-marker"> 6 <link rel="match" href="scroll-target-group-003-ref.html"> 7 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> 8 <style> 9 :root { 10 font-family: "Ahem"; 11 } 12 13 #wrapper { 14 scroll-target-group: auto; 15 } 16 17 #scroller { 18 overflow: auto; 19 height: 130px; 20 width: 100px; 21 scroll-marker-group: after; 22 counter-reset: t; 23 } 24 25 #scroller div { 26 width: 100px; 27 height: 100px; 28 background-color: blue; 29 margin: 5px; 30 counter-increment: t; 31 } 32 33 #scroller div::scroll-marker { 34 content: "t" counter(t); 35 color: red; 36 } 37 38 #scroller div::scroll-marker:target-current { 39 color: green; 40 } 41 42 a { 43 color: red; 44 } 45 46 a:target-current { 47 color: green; 48 } 49 </style> 50 <div id="wrapper"> 51 <a href="#target1">t1</a> 52 <a href="#target2">t2</a> 53 <a href="#target3">t3</a> 54 <a id="link4" href="#target4">t4</a> 55 </div> 56 <div id="scroller"> 57 <div id="target1"></div> 58 <div id="target2"></div> 59 <div id="target3"></div> 60 <div id="target4"></div> 61 </div> 62 <script> 63 scroller.scrollTop = 400; 64 </script>