scroll-marker-selection-in-2d-ref.html (1933B)
1 <!DOCTYPE html> 2 <html> 3 <body> 4 <style> 5 .scroller { 6 width: 200px; 7 height: 200px; 8 position: relative; 9 border: solid; 10 scroll-marker-group: after; 11 overflow: scroll; 12 } 13 .scroll_marker_group { 14 height: 100px; 15 width: 200px; 16 border: solid; 17 white-space: nowrap; 18 display: grid; 19 grid-auto-flow: column; 20 } 21 .vwm { 22 writing-mode: vertical-lr; 23 } 24 .box { 25 position: absolute; 26 height: 50px; 27 width: 50px; 28 font-size: 50px; 29 background-color: blue; 30 } 31 .current { 32 border: solid blue; 33 } 34 .scroll_marker { 35 height: 40px; 36 width: 40px; 37 font-size: 20px; 38 display: inline-block; 39 } 40 .top_right { 41 top: 0px; 42 left: 100px; 43 &>scroll_marker { 44 background-color: teal; 45 } 46 } 47 .bottom_left { 48 top: 100px; 49 left: 0px; 50 } 51 .tr.scroll_marker { 52 background-color: teal; 53 } 54 .bl.scroll_marker { 55 background-color: brown; 56 } 57 .space { 58 height: 800px; 59 width: 800px; 60 position: absolute; 61 } 62 </style> 63 <div> 64 <div class="scroller"> 65 <div class="space"></div> 66 <div class="top_right box">TR</div> 67 <div class="bottom_left box">BL</div> 68 </div> 69 <div class="scroll_marker_group"> 70 <div class="current tr scroll_marker"></div> 71 <div class="bl scroll_marker"></div> 72 </div> 73 <div class="vwm scroller"> 74 <div class="space"></div> 75 <div class="top_right box">TR</div> 76 <div class="bottom_left box">BL</div> 77 </div> 78 <div class="vwm scroll_marker_group"> 79 <div class="tr scroll_marker"></div> 80 <div class="bl current scroll_marker"></div> 81 </div> 82 </div> 83 </body> 84 </html>