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