2019-01-12 11:33:27 +08:00
|
|
|
let cached;
|
2018-03-05 19:05:23 +08:00
|
|
|
|
2019-01-12 11:33:27 +08:00
|
|
|
export default function getScrollBarSize(fresh) {
|
2018-03-05 19:05:23 +08:00
|
|
|
if (fresh || cached === undefined) {
|
2019-01-12 11:33:27 +08:00
|
|
|
const inner = document.createElement('div');
|
|
|
|
inner.style.width = '100%';
|
|
|
|
inner.style.height = '200px';
|
2018-03-05 19:05:23 +08:00
|
|
|
|
2019-01-12 11:33:27 +08:00
|
|
|
const outer = document.createElement('div');
|
|
|
|
const outerStyle = outer.style;
|
2018-03-05 19:05:23 +08:00
|
|
|
|
2019-01-12 11:33:27 +08:00
|
|
|
outerStyle.position = 'absolute';
|
|
|
|
outerStyle.top = 0;
|
|
|
|
outerStyle.left = 0;
|
|
|
|
outerStyle.pointerEvents = 'none';
|
|
|
|
outerStyle.visibility = 'hidden';
|
|
|
|
outerStyle.width = '200px';
|
|
|
|
outerStyle.height = '150px';
|
|
|
|
outerStyle.overflow = 'hidden';
|
2018-03-05 19:05:23 +08:00
|
|
|
|
2019-01-12 11:33:27 +08:00
|
|
|
outer.appendChild(inner);
|
2018-03-05 19:05:23 +08:00
|
|
|
|
2019-01-12 11:33:27 +08:00
|
|
|
document.body.appendChild(outer);
|
2018-03-05 19:05:23 +08:00
|
|
|
|
2019-01-12 11:33:27 +08:00
|
|
|
const widthContained = inner.offsetWidth;
|
|
|
|
outer.style.overflow = 'scroll';
|
|
|
|
let widthScroll = inner.offsetWidth;
|
2018-03-05 19:05:23 +08:00
|
|
|
|
|
|
|
if (widthContained === widthScroll) {
|
2019-01-12 11:33:27 +08:00
|
|
|
widthScroll = outer.clientWidth;
|
2018-03-05 19:05:23 +08:00
|
|
|
}
|
|
|
|
|
2019-01-12 11:33:27 +08:00
|
|
|
document.body.removeChild(outer);
|
2018-03-05 19:05:23 +08:00
|
|
|
|
2019-01-12 11:33:27 +08:00
|
|
|
cached = widthContained - widthScroll;
|
2018-03-05 19:05:23 +08:00
|
|
|
}
|
2019-01-12 11:33:27 +08:00
|
|
|
return cached;
|
2018-03-05 19:05:23 +08:00
|
|
|
}
|