scrollbar-gutter-root-ref.html (1364B)
1 <!doctype html> 2 <meta charset="utf-8"> 3 <title>CSS Overflow: scrollbar-gutter on the root element</title> 4 <link rel="help" href="https://drafts.csswg.org/css-overflow-4/#scrollbar-gutter-property"> 5 <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1874093"> 6 7 <style> 8 html { 9 background-color: blue; 10 margin: 10px; 11 padding: 10px; 12 border: 5px solid black; 13 } 14 15 body { 16 margin: 10px; 17 padding: 10px; 18 border: 5px solid green; 19 } 20 21 #abspos { 22 position:absolute; 23 top:150px; 24 left: 0px; 25 background-color: green; 26 width: 80px; 27 height: 100px; 28 transform: translateZ(0); 29 } 30 31 p { 32 background-color: purple; 33 color: white; 34 } 35 </style> 36 <div id="outer" style="width: 100px; height: 100px; overflow: scroll; left: -200px; position: absolute;"> 37 <div id="inner" style="width: 100%; height: 200%;"></div> 38 </div> 39 <script> 40 var outer = document.getElementById("outer"); 41 var inner = document.getElementById("inner"); 42 // Compute scrollbar gutter size and add it as margin to the root element 43 document.documentElement.style.marginRight = String((outer.offsetWidth - inner.offsetWidth) + 10) + "px"; 44 </script> 45 46 <p id="content">Should not have space around me in the inline axis.</p> 47 <div id="abspos"> </div>