Напишите код, который возвращает ширину стандартной полосы прокрутки. Именно самой полосы, где ползунок. Обычно она равна 16px, но в редких и мобильных браузерах может колебаться от 14px до 18px.
Если для этого вам понадобится добавить в DOM вспомогательные элементы, то пусть они не будут видны на экране.
Алгоритм основан на том, что внутренний элемент по умолчанию занимает всю доступную ширину.
Поэтому если взять элемент и запихать в него внутренний, а потом добавить полосу прокрутки, то ширины внутреннего уменьшится. Размер, на который она уменьшилась — как раз и будет ширина полосы прокрутки.
Шаги:
- Добавить два
DIVодин в другом: внешнийdivи внутреннийinnerDiv, причем внутренний выше внешнего, но у внешнегоoverflow-y: hidden. - По умолчанию, внутренний распахнется на всю возможную ширину. Посчитаем её:
innerDiv.offsetWidth. - Добавим внешнему
DIVстильoverflow-y:scroll. При этом внутренний автоматически ужмется по ширине. - Пересчитаем ширину внутреннего.
- Разница (2) и (4) является ответом.
Чтобы внешний div не был виден, нельзя ему ставить display:none, в этом случае метрики не сработают. Как вариант — поставить position:absolute;visibility:hidden, чтобы он добавлялся, но был не виден.
Но если поставить position:absolute, то ширина такого div будет нулевая, потому что в нём нет текста, а элемент с таким позиционированием «подстраивается» по ширине под текст.
Так что дополнительно нужно будет поставить ему еще и ширину.
Код в результате:
var div = document.createElement('div');
div.style.cssText="position:absolute;height:50px;overflow-y:hidden;width:50px;visibility:hidden";
div.innerHTML = '<div style="height:100px"></div>';
var innerDiv = div.firstChild;
document.body.appendChild(div);
var w1 = innerDiv.offsetWidth;
div.style.overflowY = 'scroll';
var w2 = innerDiv.offsetWidth;
alert(w1 - w2);
В песочнице: tutorial/browser/dom/metric/scrollbarWidth.html