targeted-column-scroll-marker-selection-002-ref.html (2660B)
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="utf-8"> 6 <title>CSS Test: scroll tracking for ::scroll-markers whose orignatin elements cannot be scroll-aligned </title> 7 <link rel="help" href="https://drafts.csswg.org/css-overflow-5/#scroll-container-scroll"> 8 </head> 9 10 <body> 11 <style> 12 .wrapper { 13 display: grid; 14 justify-content: center; 15 } 16 17 .carousel { 18 width: 800px; 19 height: 200px; 20 overflow-x: scroll; 21 scroll-snap-type: x mandatory; 22 list-style-type: none; 23 scroll-behavior: smooth; 24 border: solid 2px grey; 25 padding-top: 10%; 26 text-align: center; 27 counter-set: markeridx -1; 28 columns: 2; 29 30 & > :nth-child(odd)::scroll-marker { 31 content: counter(markeridx); 32 counter-increment: markeridx; 33 align-content: center; 34 text-align: center; 35 width: 35px; 36 height: 35px; 37 border-radius: 50%; 38 margin: 3px; 39 background-color: red; 40 } 41 /* item 4 is child 5 */ 42 & > :nth-child(5)::scroll-marker { 43 background-color: green; 44 } 45 46 &>.item { 47 scroll-snap-align: none; 48 height: 80%; 49 width: 158px; 50 border: 1px solid; 51 place-content: center; 52 display: inline-block; 53 } 54 55 /* Item 3 is child 4. Starting from scrollLeft=0, calling 56 box4.scrollIntoView ends up in a position that aligns box 3. */ 57 & > :nth-child(4){ 58 scroll-snap-align: center; 59 } 60 61 scroll-marker-group: after; 62 63 &::scroll-marker-group { 64 height: 45px; 65 display: flex; 66 align-items: center; 67 justify-content: center; 68 border: solid 1px black; 69 border-radius: 30px; 70 } 71 } 72 </style> 73 <div class="wrapper" id="wrapper"> 74 <div class="carousel" id="carousel"> 75 <div class="item item0" tabindex=0>0</div> 76 <div class="item item1" tabindex=0>1</div> 77 <div class="item item2" tabindex=0>2</div> 78 <div class="item item3" tabindex=0>3</div> 79 <div class="item item4" tabindex=0>4</div> 80 <div class="item item5" tabindex=0>5</div> 81 <div class="item item6" tabindex=0>6</div> 82 <div class="item item7" tabindex=0>7</div> 83 <div class="item item8" tabindex=0>8</div> 84 <div class="item item9" tabindex=0>9</div> 85 <div class="item item10" tabindex=0>10</div> 86 <div class="item item11" tabindex=0>11</div> 87 <div class="item item12" tabindex=0>12</div> 88 <div class="item item13" tabindex=0>13</div> 89 <div class="item item14" tabindex=0>14</div> 90 <div class="item item15" tabindex=0>15</div> 91 </div> 92 </div> 93 </body> 94 95 </html>