В следующем HTML будет отображаться полоса прокрутки на правом внутреннем краю div.container.
Можно ли определить ширину полосы прокрутки?
<div class="container" style="overflow-y:auto; height:40px;">
<div class="somethingBig"></div>
</div>
В следующем HTML будет отображаться полоса прокрутки на правом внутреннем краю div.container.
Можно ли определить ширину полосы прокрутки?
<div class="container" style="overflow-y:auto; height:40px;">
<div class="somethingBig"></div>
</div>
Эта функция должна указывать ширину полосы прокрутки
function getScrollbarWidth() {
var outer = document.createElement("div");
outer.style.visibility = "hidden";
outer.style.width = "100px";
outer.style.msOverflowStyle = "scrollbar"; // needed for WinJS apps
document.body.appendChild(outer);
var widthNoScroll = outer.offsetWidth;
// force scrollbars
outer.style.overflow = "scroll";
// add innerdiv
var inner = document.createElement("div");
inner.style.width = "100%";
outer.appendChild(inner);
var widthWithScroll = inner.offsetWidth;
// remove divs
outer.parentNode.removeChild(outer);
return widthNoScroll - widthWithScroll;
}
Основные шаги:
Рабочий пример здесь: http://jsfiddle.net/UU9kg/17/
Обновление
Если вы используете это в приложении Windows (metro), убедитесь, что вы устанавливаете свойство -ms-overflow-style для 'внешнего' div scrollbar
, иначе ширина не будет правильно обнаружена. (обновлен код)
Обновление # 2 Это не будет работать в Mac OS с настройкой "Только показывать прокрутки при прокрутке" (Yosemite и вверх).
// offsetWidth включает в себя ширину полосы прокрутки и clientWidth. Как правило, он равен 14-18px. так:
var scrollBarWidth = element.offsetWidth - element.clientWidth;
Если ребенок принимает полную ширину контейнера, исключая полосу прокрутки (по умолчанию), вы можете вычесть ширину:
var child = document.querySelector(".somethingBig");
var scrollbarWidth = child.parentNode.offsetWidth - child.offsetWidth;
Я думаю, что это будет просто и быстро -
var scrollWidth= window.innerWidth-$(document).width()
Предполагая, что контейнер находится только на странице один раз, и вы используете jQuery, тогда:
var containerEl = $('.container')[0];
var scrollbarWidth = containerEl.offsetWidth - containerEl.clientWidth;
Также см. этот ответ для более подробной информации.
Я использовал следующую функцию, чтобы получить высоту/ширину полосы прокрутки:
function getBrowserScrollSize(){
var css = {
"border": "none",
"height": "200px",
"margin": "0",
"padding": "0",
"width": "200px"
};
var inner = $("<div>").css($.extend({}, css));
var outer = $("<div>").css($.extend({
"left": "-1000px",
"overflow": "scroll",
"position": "absolute",
"top": "-1000px"
}, css)).append(inner).appendTo("body")
.scrollLeft(1000)
.scrollTop(1000);
var scrollSize = {
"height": (outer.offset().top - inner.offset().top) || 0,
"width": (outer.offset().left - inner.offset().left) || 0
};
outer.remove();
return scrollSize;
}
Эти решения на основе jQuery работают в IE7 + и во всех других современных браузерах (включая мобильные устройства, где высота/ширина полосы прокрутки будет равна 0).
Вот простой способ использования jQuery.
var scrollbarWidth = jQuery('div.withScrollBar').get(0).scrollWidth - jQuery('div.withScrollBar').width();
В основном мы вычитаем прокручиваемую ширину из общей ширины и которая должна обеспечивать ширину полосы прокрутки. Конечно, вы захотите кэшировать выбор jQuery ('div.withScrollBar'), чтобы вы не делали эту часть дважды.
Если вы используете JQuery. эй, попробуйте этот код:
$.position.scrollbarWidth()
этот работал у меня..
function getScrollbarWidth() {
var div = $('<div style="width:50px;height:50px;overflow:hidden;position:absolute;top:-200px;left:-200px;"><div style="height:100px;"></div>');
$('body').append(div);
var w1 = $('div', div).innerWidth();
div.css('overflow-y', 'scroll');
var w2 = $('div', div).innerWidth();
$(div).remove();
return (w1 - w2);
}