Как проверить, есть ли скроллбар
Доброго времени, товарищи.
Такая проблема, для меня не тривиальная: нужно проверить, появился ли скроллбар на сайте. Если есть полоса прокрутки, то надо выполнить определенное действие. Может быть, можно так: если ширина страницы больше 100%, то выполнить действие? Нужно зафиксировать контент в браузере чтобы он не сдвигался в сторону при появлении полосы прокрутки. Может, есть другие решения? в общем, грубо говоря человеческим языком, должно выглядеть так:
if('scrollbar' == true){
'do something';
}
|
shaltay, может таки вёрстку нормальную сделать?
|
Да вот не могу я найти решения в верстке. Ни один форум пока не помог. Если сайт центрирован, то центр разный с прокруткой и без.
И все-таки, можно как-то детерминировать скроллбар? |
Цитата:
|
Цитата:
|
Нашел в коде вконтакте вот такую штуку:
<body onresize="onBodyResize()" class="is_rtl"> Что бы это могло значить? |
if (document.body.scrollWidth > document.body.offsetWidth) ...; |
Цитата:
if (document.body.scrollWidth > document.body.offsetWidth){
alert('yo!!!');
}
ничего не произошло. Прокрутка есть.. Так же пробовал со scrollHeight. |
Сталкивался с проблемой.
Для большинства браузеров делается скролинг (пусть пустой будет) Для оперы. if (opera) { if (document.body.scrollHeight > window.innerHeight && (!document.body.style.paddingRight || document.body.style.paddingRight == scrollWidth+"px")) document.body.style.paddingRight = "0px"; if (document.body.scrollHeight < window.innerHeight) document.body.style.paddingRight = this.scrollWidth+"px"; } что-то типа этого вешается на onresize |
неужели нет кроссбраузерного решения?
|
shaltay,
Вариант кроссбраузерного определения скролбаров на странице ...
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
body{
height: 1000px;
width: 1500px;
}
</style>
</head>
<body>
<script type="text/javascript">
function get_scroll(a) {
var d = document,
b = d.body,
e = d.documentElement,
c = "client" + a;
a = "scroll" + a;
return /CSS/.test(d.compatMode)? (e[c]< e[a]) : (b[c]< b[a])
};
</script>
<input type="button" value="go" onclick="alert('Горизонтальный скроллбар = '+get_scroll('Width')+'\nВертикальный скроллбар = '+get_scroll('Height'))"/>
</body>
</html>
|
Цитата:
|
На само деле все очень просто, не нужно отслеживать появления скрола, нужно задать левое поле не через CSS, а через JS, поделив пополам остаток от ширины экрана за минусом блока с контентом. А правое поле оставить width: auto;
|
т.е. после прогрузки сраницы делаем $('body').css('display','none'); и записываем ширину окна, соответственно оно будет без скролла, а потом возвращаем все на место и снова замеряем, разница будет шириной скрола если она вообще будет. и для каждого браузера определится точно.
|
| Часовой пояс GMT +3, время: 16:27. |