VDS за 300р от нашего партнера SpaceWeb
[61]
29 мая 2014, 15:57

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

Привет!

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

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

Комментарии (7)
grom 29.05.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());
0
BoogVAr 29.05.2014 19:35

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

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

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

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

Так и скрываю.
+3
youbi 01.06.2014 18:42

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

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

Добавить комментарий

Войдите, чтобы написать о чем-нибудь...
Вход Регистрация
Web.onRails
Здесь вы можете спросить или написать обо всём, что касается Веб-разработки.
написать о чем-нибудь...
Метки:
Лучшее
[4]
10 Окт 2018, 15:33
Как запретить просмотр сайта по IP?
[просмотров 5566]
[118]
21 Июл 2011, 14:04
Python Imaging Library (PIL)
[просмотров 3846]
[52]
16 Окт 2011, 15:38
Вывести все элементы POST
[просмотров 3694]
[74]
31 мая 2011, 11:48
Python проверка существования переменной
[просмотров 3315]
[315]
16 Июл 2011, 20:03
Python работа с MySQL
[просмотров 3146]
[1]
13 Фев 2019, 14:23
Как получить значение CSS в javascript
[просмотров 3045]
[58]
29 мая 2012, 12:08
Узнать версию PHP из командной строки
[просмотров 2968]
[100]
19 Дек 2014, 16:16
User-agent для Internet Explorer 11
[просмотров 2638]

Вести с Хабра