scrollbar-gutter-root-both-edges-ref.html (1424B)
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 6 <style> 7 html { 8 background-color: blue; 9 margin: 10px; 10 padding: 10px; 11 border: 5px solid black; 12 } 13 14 body { 15 margin: 10px; 16 padding: 10px; 17 border: 5px solid green; 18 } 19 20 #abspos { 21 position:absolute; 22 top: 150px; 23 left: 15px; 24 background-color: green; 25 width: 80px; 26 height: 100px; 27 transform: translateZ(0); 28 } 29 30 p { 31 background-color: purple; 32 color: white; 33 } 34 </style> 35 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 40 <script> 41 var outer = document.getElementById("outer"); 42 var inner = document.getElementById("inner"); 43 // Compute scrollbar gutter size and add it as margin to the root element 44 var scrollbarWidthPlusMargin = String((outer.offsetWidth - inner.offsetWidth) + 10) + "px"; 45 document.documentElement.style.marginRight = scrollbarWidthPlusMargin; 46 document.documentElement.style.marginLeft = scrollbarWidthPlusMargin; 47 </script> 48 49 <p id="content">Should not have space around me in the inline axis.</p> 50 <div id="abspos"></div>