scrollbar-ref.html (4429B)
1 <!DOCTYPE html> 2 <style> 3 td { text-align: center; } 4 5 .parent { 6 box-sizing: border-box; 7 width: 50px; 8 height: 50px; 9 border: solid; 10 position: relative; 11 } 12 13 .child { 14 position: absolute; 15 width: 10px; 16 height: 10px; 17 background: green; 18 } 19 20 .top-left { 21 top: 0; 22 left: 0; 23 } 24 25 .top-right { 26 top: 0; 27 right: 0; 28 } 29 30 .bottom-left { 31 bottom: 0; 32 left: 0; 33 } 34 35 .bottom-right { 36 bottom: 0; 37 right: 0; 38 } 39 </style> 40 41 <table> 42 <tr> 43 <td></td> 44 <td colspan=2>LTR</td> 45 <td colspan=2>RTL</td> 46 </tr> 47 <tr> 48 <td></td> 49 <td>Y</td> 50 <td>X</td> 51 <td>Y</td> 52 <td>X</td> 53 </tr> 54 <tr> 55 <td>HTB</td> 56 <td> 57 <div class="parent" style="writing-mode: horizontal-tb; direction: ltr; overflow-y: scroll;"> 58 <div class="child top-left"></div> 59 <div class="child top-right"></div> 60 <div class="child bottom-left"></div> 61 <div class="child bottom-right"></div> 62 </div> 63 </td> 64 <td> 65 <div class="parent" style="writing-mode: horizontal-tb; direction: ltr; overflow-x: scroll;"> 66 <div class="child top-left"></div> 67 <div class="child top-right"></div> 68 <div class="child bottom-left"></div> 69 <div class="child bottom-right"></div> 70 </div> 71 </td> 72 <td> 73 <div class="parent" style="writing-mode: horizontal-tb; direction: rtl; overflow-y: scroll;"> 74 <div class="child top-left"></div> 75 <div class="child top-right"></div> 76 <div class="child bottom-left"></div> 77 <div class="child bottom-right"></div> 78 </div> 79 </td> 80 <td> 81 <div class="parent" style="writing-mode: horizontal-tb; direction: rtl; overflow-x: scroll;"> 82 <div class="child top-left"></div> 83 <div class="child top-right"></div> 84 <div class="child bottom-left"></div> 85 <div class="child bottom-right"></div> 86 </div> 87 </td> 88 </tr> 89 <tr> 90 <td>VRL</td> 91 <td> 92 <div class="parent" style="writing-mode: vertical-rl; direction: ltr; overflow-y: scroll;"> 93 <div class="child top-left"></div> 94 <div class="child top-right"></div> 95 <div class="child bottom-left"></div> 96 <div class="child bottom-right"></div> 97 </div> 98 </td> 99 <td> 100 <div class="parent" style="writing-mode: vertical-rl; direction: ltr; overflow-x: scroll;"> 101 <div class="child top-left"></div> 102 <div class="child top-right"></div> 103 <div class="child bottom-left"></div> 104 <div class="child bottom-right"></div> 105 </div> 106 </td> 107 <td> 108 <div class="parent" style="writing-mode: vertical-rl; direction: rtl; overflow-y: scroll;"> 109 <div class="child top-left"></div> 110 <div class="child top-right"></div> 111 <div class="child bottom-left"></div> 112 <div class="child bottom-right"></div> 113 </div> 114 </td> 115 <td> 116 <div class="parent" style="writing-mode: vertical-rl; direction: rtl; overflow-x: scroll;"> 117 <div class="child top-left"></div> 118 <div class="child top-right"></div> 119 <div class="child bottom-left"></div> 120 <div class="child bottom-right"></div> 121 </div> 122 </td> 123 </tr> 124 <tr> 125 <td>VLR</td> 126 <td> 127 <div class="parent" style="writing-mode: vertical-lr; direction: ltr; overflow-y: scroll;"> 128 <div class="child top-left"></div> 129 <div class="child top-right"></div> 130 <div class="child bottom-left"></div> 131 <div class="child bottom-right"></div> 132 </div> 133 </td> 134 <td> 135 <div class="parent" style="writing-mode: vertical-lr; direction: ltr; overflow-x: scroll;"> 136 <div class="child top-left"></div> 137 <div class="child top-right"></div> 138 <div class="child bottom-left"></div> 139 <div class="child bottom-right"></div> 140 </div> 141 </td> 142 <td> 143 <div class="parent" style="writing-mode: vertical-lr; direction: rtl; overflow-y: scroll;"> 144 <div class="child top-left"></div> 145 <div class="child top-right"></div> 146 <div class="child bottom-left"></div> 147 <div class="child bottom-right"></div> 148 </div> 149 </td> 150 <td> 151 <div class="parent" style="writing-mode: vertical-lr; direction: rtl; overflow-x: scroll;"> 152 <div class="child top-left"></div> 153 <div class="child top-right"></div> 154 <div class="child bottom-left"></div> 155 <div class="child bottom-right"></div> 156 </div> 157 </td> 158 </tr> 159 </table>