- From: Richard Gibson via GitHub <sysbot+gh@w3.org>
- Date: Fri, 31 Mar 2017 15:42:50 +0000
- To: public-css-archive@w3.org
`getBoxQuads` definitely helps, but is still _very_ clumsy. The problem is that it can describe [four boxes](https://www.w3.org/TR/css3-box/#various), but scrollbars actually introduce a _fifth_ by [separating](https://www.w3.org/TR/css3-box/#overflow0) the padding edge from the inner border edge. So I guess utilization would look something like
```js
function getScrollGutterWidth(elem) {
let paddingBox = elem.getBoxQuads({box: "padding"});
let paddingBoxWidth = paddingBox.p2.x - paddingBox.p1.x;
let borderBox = elem.getBoxQuads({box: "border"});
let borderBoxWidth = borderBox.p2.x - borderBox.p1.x;
// Both borders and scrollbars can contribute to the difference between
// border- and padding-box width.
// Determine scrollbar width by subtract border widths from that difference.
let style = elem.ownerDocument.defaultView.getComputedStyle(elem);
return borderBoxWidth - paddingBoxWidth -
parseFloat(style.borderLeftWidth) - parseFloat(style.borderRightWidth);
}
```
Honestly, that's not really an improvement.
--
GitHub Notification of comment by gibson042
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/1129#issuecomment-290748596 using your GitHub account
Received on Friday, 31 March 2017 15:42:56 UTC