|
Как с помощью скрипта высчитать ширину полосы прокрутки?
Добрый день!
У меня есть вот такая разметка. С помощью стиля высчитывается ширина полосы прокрутки (за основу берется 16px как у большинства браузерах). Но как мы знаем, в редких и мобильных браузерах ширина полосы прокрутки может колебаться от 14px до 18px, а кое-где быть даже равна нулю. Скажите, пожалуйста, а как можно с помощью скрипта высчитывать полосу прокрутки и этим же скриптом уже корректировать стиль (margin и width) для блока .wrp? Спасибо!
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
}
.wrapper {
background-color: burlywood;
text-align: justify;
margin: 0 auto;
width: 200px;
padding: 0 100px 0 0;
}
.wrp {
background-color: chocolate;
height: 100%;
min-height: 100vh;
padding: 0;
margin: 0 calc(8px - 50vw) 0 calc(108px - 50vw);
width: calc(100vw - 16px);
}
</style>
<div class="wrapper">
много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста
<div class="wrp">Этот блок нужно растянуть по ширине экрана, за пределы его родителя</div>
много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста
</div>
|
Win 7, Chrome lts:
var scroll_bar_width=$('body').css('overflow','hidden').width()-$('body').css('overflow','auto').width();
alert(scroll_bar_width);//17
Ps. Почему не разместить .wrp вне .wrapper? |
|
Цитата:
это уже готовая разметка, я не могу ее трогать. рони, да, я видел уже это решение. Но, как я понимаю, это не совсем то, что нужно. Как же мне им вывести margin и width для блока .wrp? |
Может так?
https://jsfiddle.net/3m91ubrg/ |
LADYX,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
}
.wrapper {
background-color: burlywood;
text-align: justify;
margin: 0 auto;
width: 200px;
padding: 0 100px 0 0;
}
.wrp {
background-color: chocolate;
height: 100%;
min-height: 100vh;
padding: 0;
margin: 0 calc(8px - 50vw) 0 calc(108px - 50vw);
width: calc(100vw - 16px);
}
</style>
</head>
<body>
<div class="wrapper">
много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста
<div class="wrp">Этот блок нужно растянуть по ширине экрана, за пределы его родителя</div>
много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста
</div>
<script>
// создадим элемент с прокруткой
var div = document.createElement('div');
div.style.overflowY = 'scroll';
div.style.width = '50px';
div.style.height = '50px';
// при display:none размеры нельзя узнать
// нужно, чтобы элемент был видим,
// visibility:hidden - можно, т.к. сохраняет геометрию
div.style.visibility = 'hidden';
document.body.appendChild(div);
var scrollWidth = div.offsetWidth - div.clientWidth;
document.body.removeChild(div);
var x = ".wrp{ width: calc(100vw - "+scrollWidth+"px); margin: 0 calc("+(scrollWidth/2)+"px - 50vw) 0 calc(108px - 50vw);}";
var style = document.createElement('style');
style.textContent = x;
document.head.appendChild(style);
</script>
</body>
</html>
|
рони,
в этом случае появляется полоса прокрутки внизу. И мы ведь снова в скрипте берем за основу ширину полосы в 16px. А как же в других браузерах тогда? Скажите, пожалуйста, в скрипте 50px - не могу понять, это что за число, откуда оно берется? Цитата:
да, это вариант работает. Странно, скажите, пожалуйста, а зачем тогда использовать такой объемный вариант, как этот Цитата:
Цитата:
|
LADYX, мой вариант годится, если соблюдены определенные условия:
1. JQ подключена; 2. .wrp является потомком .wrapper. Вариант рони не имеет таких зависимостей. |
Цитата:
|
Цитата:
|
| Часовой пояс GMT +3, время: 00:48. |
|