scroll-markers-under-content-visibility-auto-ref.html (1268B)
1 <!doctype html> 2 <meta charset="utf-8"> 3 <title>::scroll-markers with content-visibility: auto ancestors ref</title> 4 <link rel="help" href="https://drafts.csswg.org/css-overflow-5/#scroll-marker-pseudo"> 5 <link rel="author" href="mailto:vmpstr@chromium.org"> 6 <style> 7 #scroller { 8 width: 600px; 9 height: 300px; 10 overflow: scroll; 11 scroll-marker-group: after; 12 } 13 14 #scroller div { 15 width: 600px; 16 height: 300px; 17 margin-bottom: 20px; 18 background: green; 19 } 20 21 #scroller::scroll-marker-group { 22 border: 3px solid black; 23 padding: 5px; 24 height: 20px; 25 display: block; 26 } 27 28 #scroller div::scroll-marker { 29 content: ""; 30 width: 10px; 31 height: 10px; 32 background-color: blue; 33 border-radius: 50%; 34 display: inline-block; 35 } 36 </style> 37 <div id="scroller"> 38 <div></div> <div></div> <div></div> 39 <div></div> <div></div> <div></div> 40 <div></div> <div></div> <div></div> 41 <div></div> <div></div> <div></div> 42 <div></div> <div></div> <div></div> 43 <div></div> <div></div> <div></div> 44 <div></div> <div></div> <div></div> 45 <div></div> <div></div> <div></div> 46 <div></div> <div></div> <div></div> 47 <div></div> <div></div> <div></div> 48 <div></div> <div></div> <div></div> 49 <div></div> <div></div> <div></div> 50 </div>