column-scroll-marker-007.html (1308B)
1 <!DOCTYPE html> 2 <title>CSS Overflow Test: ::column::scroll-marker:target-current is supported and changes on scroll</title> 3 <link rel="help" href="https://drafts.csswg.org/css-overflow-5/#active-scroll-marker"> 4 <link rel="match" href="column-scroll-marker-007-ref.html"> 5 <style> 6 #container { 7 overflow: hidden; 8 columns: 3; 9 column-fill: auto; 10 gap: 0; 11 orphans: 1; 12 widows: 1; 13 height: 100px; 14 border: 15px solid; 15 line-height: 20px; 16 scroll-marker-group: before; 17 background: yellow; 18 } 19 #container::scroll-marker-group { 20 display: flex; 21 justify-content: space-between; 22 height: 50px; 23 background: cyan; 24 } 25 #container::column::scroll-marker { 26 display: flex; 27 justify-content: center; 28 align-items: center; 29 width: 50px; 30 height: 50px; 31 background: hotpink; 32 content: "*"; 33 } 34 #container::column::scroll-marker:target-current { 35 background: green; 36 } 37 </style> 38 <div style="width:450px;"> 39 <div id="container"> 40 First column<br> 41 <br> 42 <br> 43 <br> 44 <br> 45 Second column<br> 46 <br> 47 <br> 48 <br> 49 <br> 50 Third column<br> 51 <br> 52 <br> 53 <br> 54 <br> 55 Fourth column<br> 56 <br> 57 <br> 58 <br> 59 <br> 60 Fifth column<br> 61 </div> 62 </div> 63 <script> 64 container.scrollLeft = 400; 65 </script>