scroll-marker-group-snap-aligns-to-active-ref.html (3421B)
1 <!DOCTYPE html> 2 <html> 3 <body> 4 <style> 5 * { 6 margin: 0px; 7 } 8 .scroller { 9 height: 500px; 10 width: 80vw; 11 border: solid 1px; 12 overflow-x: scroll; 13 justify-self: center; 14 white-space: nowrap; 15 padding-top: 50px; 16 scroll-behavior: smooth; 17 scroll-snap-type: x mandatory; 18 counter-set: markeridx -1; 19 } 20 21 .scroll-marker-group { 22 border: solid 1px black; 23 height: 40px; 24 width: 500px; 25 display: grid; 26 grid-auto-flow: column; 27 justify-self: center; 28 overflow-x: scroll; 29 white-space: nowrap; 30 scroll-snap-type: x mandatory; 31 } 32 33 .box { 34 height: 400px; 35 width: 50%; 36 border: 1px solid; 37 display: inline-block; 38 margin-left: 100px; 39 margin-right: 100px; 40 scroll-snap-align: none; 41 align-content: center; 42 text-align: center; 43 &::scroll-marker:target-current { 44 background-color: green; 45 } 46 } 47 48 .scroll-marker { 49 content: counter(markeridx); 50 counter-increment: markeridx; 51 width: 20px; 52 height: 20px; 53 background-color: red; 54 text-align: center; 55 margin-right: 100px; 56 } 57 58 #box3 { 59 scroll-snap-align: center; 60 } 61 #marker3 { 62 scroll-snap-align: center; 63 } 64 65 .green { 66 background-color: green 67 } 68 69 </style> 70 <div class="scroller" id="carousel"> 71 <div class="box" id="box0"><p>0</p></div> 72 <div class="box" id="box1"><p>1</p></div> 73 <div class="box" id="box2"><p>2</p></div> 74 <div class="box" id="box3"><p>3</p></div> 75 <div class="box" id="box4"><p>4</p></div> 76 <div class="box" id="box5"><p>5</p></div> 77 <div class="box" id="box6"><p>6</p></div> 78 <div class="box" id="box7"><p>7</p></div> 79 <div class="box" id="box8"><p>8</p></div> 80 <div class="box" id="box9"><p>9</p></div> 81 <div class="box" id="box10"><p>10</p></div> 82 <div class="box" id="box11"><p>11</p></div> 83 <div class="box" id="box12"><p>12</p></div> 84 <div class="box" id="box13"><p>13</p></div> 85 <div class="box" id="box14"><p>14</p></div> 86 <div class="box" id="box15"><p>15</p></div> 87 </div> 88 <div class="scroll-marker-group" id="marker-group"> 89 <div class="scroll-marker" id="marker0"><a href="#">0</a></div> 90 <div class="scroll-marker" id="marker1"><a href="#">1</a></div> 91 <div class="scroll-marker" id="marker2"><a href="#">2</a></div> 92 <div class="green scroll-marker" id="marker3"><a href="#">3</a></div> 93 <div class="scroll-marker" id="marker4"><a href="#">4</a></div> 94 <div class="scroll-marker" id="marker5"><a href="#">5</a></div> 95 <div class="scroll-marker" id="marker6"><a href="#">6</a></div> 96 <div class="scroll-marker" id="marker7"><a href="#">7</a></div> 97 <div class="scroll-marker" id="marker8"><a href="#">8</a></div> 98 <div class="scroll-marker" id="marker9"><a href="#">9</a></div> 99 <div class="scroll-marker" id="marker10"><a href="#">10</a></div> 100 <div class="scroll-marker" id="marker11"><a href="#">11</a></div> 101 <div class="scroll-marker" id="marker12"><a href="#">12</a></div> 102 <div class="scroll-marker" id="marker13"><a href="#">13</a></div> 103 <div class="scroll-marker" id="marker14"><a href="#">14</a></div> 104 <div class="scroll-marker" id="marker15"><a href="#">15</a></div> 105 </div> 106 </body> 107 </html>