scrollbar-gutter-dynamic-003-ref.html (1455B)
1 <!DOCTYPE html> 2 <html> 3 <meta charset="utf-8"> 4 <title>CSS Test Reference</title> 5 <style> 6 .line { 7 display: flex; 8 } 9 10 .container { 11 writing-mode: horizontal-tb; 12 direction: ltr; 13 block-size: 200px; 14 inline-size: 200px; 15 overflow-y: hidden; 16 margin: 10px; 17 background: deepskyblue; 18 } 19 20 .content { 21 inline-size: 100%; 22 block-size: 200%; 23 background: lightsalmon; 24 } 25 26 .width-auto { 27 scrollbar-width: auto; 28 } 29 30 .width-thin { 31 scrollbar-width: thin; 32 } 33 34 .width-none { 35 scrollbar-width: none; 36 } 37 38 .gutter-stable { 39 scrollbar-gutter: stable; 40 } 41 42 .gutter-both { 43 scrollbar-gutter: stable both-edges; 44 } 45 </style> 46 47 <div class="line"> 48 <div id="stable-auto" class="container gutter-stable width-none"> 49 <div class="content"></div> 50 </div> 51 <div id="both-auto" class="container gutter-both width-none"> 52 <div class="content"></div> 53 </div> 54 </div> 55 56 <div class="line"> 57 <div id="stable-thin" class="container gutter-stable width-auto"> 58 <div class="content"></div> 59 </div> 60 <div id="both-thin" class="container gutter-both width-auto"> 61 <div class="content"></div> 62 </div> 63 </div> 64 65 <div class="line"> 66 <div id="stable-none" class="container gutter-stable width-thin"> 67 <div class="content"></div> 68 </div> 69 <div id="both-none" class="container gutter-both width-thin"> 70 <div class="content"></div> 71 </div> 72 </div> 73 </html>