Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 10.11.2017, 10:33
Аватар для LADYX
Кандидат Javascript-наук
Отправить личное сообщение для LADYX Посмотреть профиль Найти все сообщения от LADYX
 
Регистрация: 19.02.2015
Сообщений: 119

Как с помощью скрипта высчитать ширину полосы прокрутки?
Добрый день!
У меня есть вот такая разметка. С помощью стиля высчитывается ширина полосы прокрутки (за основу берется 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>
Ответить с цитированием
  #2 (permalink)  
Старый 10.11.2017, 11:09
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 1,115

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.
Ответить с цитированием
  #3 (permalink)  
Старый 10.11.2017, 11:18
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 21,699

LADYX,
Найти эту ширину можно вот так
Ответить с цитированием
  #4 (permalink)  
Старый 10.11.2017, 11:37
Аватар для LADYX
Кандидат Javascript-наук
Отправить личное сообщение для LADYX Посмотреть профиль Найти все сообщения от LADYX
 
Регистрация: 19.02.2015
Сообщений: 119

Сообщение от Nexus
Ps. Почему не разместить .wrp вне .wrapper?
Nexus,
это уже готовая разметка, я не могу ее трогать.

рони,
да, я видел уже это решение. Но, как я понимаю, это не совсем то, что нужно. Как же мне им вывести margin и width для блока .wrp?
Ответить с цитированием
  #5 (permalink)  
Старый 10.11.2017, 11:47
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 1,115

Может так?
https://jsfiddle.net/3m91ubrg/
Ответить с цитированием
  #6 (permalink)  
Старый 10.11.2017, 11:59
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 21,699

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>
Ответить с цитированием
  #7 (permalink)  
Старый 10.11.2017, 12:53
Аватар для LADYX
Кандидат Javascript-наук
Отправить личное сообщение для LADYX Посмотреть профиль Найти все сообщения от LADYX
 
Регистрация: 19.02.2015
Сообщений: 119

рони,
в этом случае появляется полоса прокрутки внизу.
И мы ведь снова в скрипте берем за основу ширину полосы в 16px. А как же в других браузерах тогда?
Скажите, пожалуйста, в скрипте 50px - не могу понять, это что за число, откуда оно берется?

Сообщение от Nexus
Может так?
https://jsfiddle.net/3m91ubrg/
Nexus,
да, это вариант работает.

Странно, скажите, пожалуйста, а зачем тогда использовать такой объемный вариант, как этот
Сообщение от рони
Найти эту ширину можно вот так
если можно обойтись таким простым вариантом, как этот?
Сообщение от Nexus
Может так?
https://jsfiddle.net/3m91ubrg/
Прошу меня простить за глупые вопросы, но все же.
Ответить с цитированием
  #8 (permalink)  
Старый 10.11.2017, 12:59
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 1,115

LADYX, мой вариант годится, если соблюдены определенные условия:
1. JQ подключена;
2. .wrp является потомком .wrapper.

Вариант рони не имеет таких зависимостей.

Последний раз редактировалось Nexus, 10.11.2017 в 13:03. Причина: Погорячился :)
Ответить с цитированием
  #9 (permalink)  
Старый 10.11.2017, 13:03
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 21,699

Сообщение от LADYX
в скрипте 50px - не могу понять, это что за число, откуда оно берется?
от фонаря -- размер любой, нам нужно только стороны прокрутки на чём-то создать.(div.style.overflowY = 'scroll'
Ответить с цитированием
  #10 (permalink)  
Старый 10.11.2017, 13:03
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 21,699

Сообщение от LADYX
мы ведь снова в скрипте берем за основу ширину полосы в 16px
где???
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
mouseup нa кнопке полосы прокрутки dadli Общие вопросы Javascript 0 30.06.2012 12:45
div в конец полосы прокрутки vladimircape Events/DOM/Window 1 03.05.2012 03:11
Как получить ширину html элемента?(возвращает NaN или auto) manking Общие вопросы Javascript 2 23.03.2012 13:17
Создание с помощью скрипта html элемента Anastasiya Общие вопросы Javascript 4 25.10.2011 22:28
как прекратить выполнение скрипта ? kefi Общие вопросы Javascript 3 31.03.2009 19:05