10.11.2017, 10:33
|
 |
Профессор
|
|
Регистрация: 19.02.2015
Сообщений: 219
|
|
|
Как с помощью скрипта высчитать ширину полосы прокрутки?
Добрый день!
У меня есть вот такая разметка. С помощью стиля высчитывается ширина полосы прокрутки (за основу берется 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>
|
|
10.11.2017, 11:09
|
|
Профессор
|
|
Регистрация: 04.12.2012
Сообщений: 3,795
|
|
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?
Последний раз редактировалось Nexus, 10.11.2017 в 11:13.
|
|
10.11.2017, 11:18
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,126
|
|
|
|
|
10.11.2017, 11:37
|
|
Профессор
|
|
Регистрация: 19.02.2015
Сообщений: 219
|
|
|
Сообщение от Nexus
|
|
Ps. Почему не разместить .wrp вне .wrapper?
|
Nexus,
это уже готовая разметка, я не могу ее трогать.
рони,
да, я видел уже это решение. Но, как я понимаю, это не совсем то, что нужно. Как же мне им вывести margin и width для блока .wrp? |
|
10.11.2017, 11:47
|
|
Профессор
|
|
Регистрация: 04.12.2012
Сообщений: 3,795
|
|
|
|
|
10.11.2017, 11:59
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,126
|
|
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>
|
|
10.11.2017, 12:53
|
|
Профессор
|
|
Регистрация: 19.02.2015
Сообщений: 219
|
|
рони,
в этом случае появляется полоса прокрутки внизу.
И мы ведь снова в скрипте берем за основу ширину полосы в 16px. А как же в других браузерах тогда?
Скажите, пожалуйста, в скрипте 50px - не могу понять, это что за число, откуда оно берется?
Nexus,
да, это вариант работает.
Странно, скажите, пожалуйста, а зачем тогда использовать такой объемный вариант, как этот
|
Сообщение от рони
|
|
Найти эту ширину можно вот так
|
если можно обойтись таким простым вариантом, как этот?
Прошу меня простить за глупые вопросы, но все же.
|
|
10.11.2017, 12:59
|
|
Профессор
|
|
Регистрация: 04.12.2012
Сообщений: 3,795
|
|
|
LADYX, мой вариант годится, если соблюдены определенные условия:
1. JQ подключена;
2. .wrp является потомком .wrapper.
Вариант рони не имеет таких зависимостей.
Последний раз редактировалось Nexus, 10.11.2017 в 13:03.
Причина: Погорячился :)
|
|
10.11.2017, 13:03
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,126
|
|
|
Сообщение от LADYX
|
|
в скрипте 50px - не могу понять, это что за число, откуда оно берется?
|
от фонаря -- размер любой, нам нужно только стороны прокрутки на чём-то создать.(div.style.overflowY = 'scroll'  |
|
10.11.2017, 13:03
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,126
|
|
|
Сообщение от LADYX
|
|
мы ведь снова в скрипте берем за основу ширину полосы в 16px
|
где??? |
|
|
|
