To calculate a size of a view area, there are cases that its scroll bar width needs to be considered. On a platform, scroll bar width is always zero. On a browser, scroll bar width is changed by zooming. This document notes a result of a experiment about scroll bar width.
Shows the following page on various browsers and various OSs, in some zooms. And gets each scroll bar width of their enviromnents.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>scrollbar test</title>
</head>
<body>
<script>
var divTag0 = document.createElement('div');
divTag0.style.position = 'absolute';
divTag0.style.overflow = 'scroll';
divTag0.style.width = '100px';
divTag0.style.height = '100px';
document.body.appendChild(divTag0);
console.log('offset width = ' + divTag0.offsetWidth);
console.log('offset height = ' + divTag0.offsetHeight);
console.log('client width = ' + divTag0.clientWidth);
console.log('client height = ' + divTag0.clientHeight);
var scrollbarWidth = divTag0.offsetWidth - divTag0.clientWidth;
console.log('scrollbar width = ' + scrollbarWidth);
</script>
</body>
</html>
-
Edge
- Zoom 100% => 12px
- Zoom 175% => 12px
- Zoom _50% => 12px
-
IE11
- Zoom 100% => 17px
- Zoom 175% => 17px
- Zoom _50% => 17px
-
Firefox
- Zoom 100% => 17px
- Zoom 170% => 10px
- Zoom _50% => 34px
-
Chrome
- Zoom 100% => 17px
- Zoom 175% => 10px
- Zoom _50% => 34px
-
Vivaldi
- Zoom 100% => 17px
- Zoom 175% => 10px
- Zoom _50% => 34px
-
Chrome
- Zoom 100% => 15px
- Zoom 175% => _9px
- Zoom _50% => 30px
-
Firefox
- Zoom 100% => 10px
- Zoom 170% => _6px
- Zoom _50% => 20px
-
Vivaldi
- Zoom 100% => 15px
- Zoom 175% => _9px
- Zoom _50% => 30px
-
Edge
- Any Zoom => 0px
-
IE11 0px
- Any Zoom => 0px
-
Vivaldi 0px
- Any Zoom => 0px
-
Firefox 0px
- Any Zoom => 0px
On some browsers, scroll bar width is not constant. On such browsers, scroll bar width needs to calculate when not only displaying initially but also resizing and zooming, etc. (Though we have no way to know when zooming.)
To get current scroll bar width correctly, it needs to be calculated by getting. But it is not good to get different widths while drawing a page. It would be better to calculate the width before re-calculating page layout.