scroll-marker-dynamic.html (1060B)
1 <!DOCTYPE html> 2 <title>CSS Overflow Test: ::scroll-marker dynamic creation and removal</title> 3 <link rel="match" href="scroll-marker-dynamic-ref.html"> 4 <link rel="help" href="https://drafts.csswg.org/css-overflow-5/#scroll-marker-pseudo"> 5 <style> 6 #scroller { 7 width: 600px; 8 height: 300px; 9 overflow: scroll; 10 scroll-marker-group: after; 11 } 12 13 #scroller div { 14 width: 600px; 15 height: 300px; 16 margin-bottom: 20px; 17 background: green; 18 } 19 20 #scroller::scroll-marker-group { 21 border: 3px solid black; 22 padding: 5px; 23 height: 20px; 24 display: block; 25 } 26 27 #scroller div::scroll-marker { 28 content: ""; 29 width: 10px; 30 height: 10px; 31 background-color: blue; 32 border-radius: 100%; 33 display: inline-block; 34 } 35 36 #scroller div::scroll-marker:target-current { 37 background-color: aqua; 38 } 39 </style> 40 <div id="scroller"> 41 <div id="first"></div> 42 </div> 43 <script> 44 let div = document.createElement("div"); 45 scroller.appendChild(div); 46 document.documentElement.offsetTop; 47 scroller.removeChild(first); 48 </script>