nested-scroll-markers-under-content-visibility-auto-ref.html (1385B)
1 <!doctype html> 2 <meta charset="utf-8"> 3 <title>::scroll-markers with content-visibility: auto ancestors and subscrollers (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 .subscroller { 15 scroll-marker-group: after; 16 overflow: scroll; 17 width: 600px; 18 height: 100px; 19 } 20 21 .cv-placeholder { 22 contain: strict; 23 width: 100px; 24 height: 100px; 25 } 26 27 #scroller::scroll-marker-group { 28 border: 3px solid black; 29 padding: 5px; 30 height: 20px; 31 display: block; 32 } 33 34 .item { 35 height: 200px; 36 } 37 38 .item::scroll-marker { 39 content: ""; 40 width: 10px; 41 height: 10px; 42 background-color: blue; 43 border-radius: 50%; 44 display: inline-block; 45 } 46 47 .spacer { 48 height: 10000px; 49 } 50 </style> 51 <div id="scroller"> 52 <div class=cv-placeholder> 53 <div class=subscroller> 54 <div class=item></div> <div class=item></div> <div class=item></div> 55 </div> 56 </div> 57 <div class=item></div> <div class=item></div> <div class=item></div> 58 <div class=spacer></div> 59 <div class=cv-placeholder> 60 <div class=subscroller> 61 <div class=item></div> <div class=item></div> <div class=item></div> 62 </div> 63 </div> 64 </div>