Узнать ширину полосы прокрутки в браузере

Привет!

Ширина полосы прокрутки различается от браузера к браузеру. На ПК она может быть от 14 до 18 пикселей, а так же 0 пикселей, как например в IE, так как она там присутствует всегда.

Стоит задача определения ширины этой полосы через JavaScript. Есть ли какой-нибудь адекватный способ это сделать?

#javascript, #jquery

238 просмотров

Комментарии (7)

grom

29 мая 2014, 19:01

Если использовать jQuery будет как-то так…

function scrollWidth()
{
var div = $('<div>').css({
position: "absolute",
top: "0px",
left: "0px",
width: "100px",
height: "100px",
visibility: "hidden",
overflow: "scroll"
});

$('body').eq(0).append(div);

var width = div.get(0).offsetWidth - div.get(0).clientWidth;

div.remove();

return width;
}

alert(scrollWidth());

BoogVAr

29 мая 2014, 19:35

А для чего точно требуется определить именно ширину этой полосы?
Если вам требуется получить ширину и высоту рабочей области браузера то это легко сделать.

youbi

29 мая 2014, 20:13

Нужно программно скрывать полосу прокрутки. Но если это делать, рабочая область растягивается и контент немного сдвигается вправо и получается некрасивое дергание. Что бы этого не происходило я буду добавлять правый margin тем самым уравновешивать скрытый скролл.

BoogVAr

31 мая 2014, 10:18

А не проще получить ширину рабочей области занести её контентом и прижать к левому краю, при скрытии полосы справа там просто останется пустое место если ширина контента будет зафиксирована. Так сказать оберни во врапер всё и прижми его к левому краю, даже если у тебя сайт по центру.

BoogVAr

31 мая 2014, 10:20

И скрывай полосу на уровне css, тогда будет ещё меньше гемороя и скачков экрана.
overflow-x:hidden;
overflow-y:hidden;

youbi

01 Июн 2014, 18:33

Так и скрываю.

youbi

01 Июн 2014, 18:42

Дело в том, что тогда придется отлеживать ресайз окна браузера. Придется вешать на body событие onResize. А оно работает, только если указать его параметром тега. Да и при быстром ресайзе или тормозах браузера, возникновение события тормозит.

При возврате скролла нужно будет все возвращать на места и событие ресайза блокировать. Вообщем с margin проще.