Javascript-форум - Как с помощью скрипта высчитать ширину полосы прокрутки?

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - Как с помощью скрипта высчитать ширину полосы прокрутки? (https://javascript.ru/forum/dom-window/71320-kak-s-pomoshhyu-skripta-vyschitat-shirinu-polosy-prokrutki.html)

Nexus,

Цитата:

Сообщение от Nexus

2. .wrp является потомком .wrapper.

.wrp является потомком .wrapper, но не прямым, т.е. .wrp идет не сразу после .wrapper. Но у остальных блоков нет ни маргинов, ни паддингов. И тем не менее, из-за этого может быть и не работает (сейчас попробовал)?
рони,

Цитата:

Сообщение от рони

где???

так вот же мы в скрипте и указываем

calc(108px - 50vw);}

Так а почему же появляется нижняя полоса прокрутки? Обратите внимание, слева небольшое расстояние, так понимаю, из-за него же она и появляется. Откуда она берется?

Цитата:

Сообщение от LADYX

так вот же мы в скрипте и указываем
calc(108px - 50vw);}

не могли бы вы пояснить что здесь указано?

LADYX,
Тут нет зависимости от родителей:
https://jsfiddle.net/3m91ubrg/1/

Цитата:

Сообщение от рони

не могли бы вы пояснить что здесь указано?

Какие-то 108px минус 50% ширины viewport'а.

~~Что такое "108px" тоже интересно.~~

Ps. 108px - это .wrp width (100px) + scrollbar width (16px) *.5

:write:

<!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;

}
</style>
</head>

<body>

<div class="wrapper">
много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста
<div class="wrp">Этот блок нужно растянуть по ширине экрана, за пределы его родителя</div>
много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста
</div>
<script>
window.addEventListener('DOMContentLoaded', function() {
var scrollWidth = window.innerWidth  - document.documentElement.clientWidth ;
var x = ".wrp{ width: calc(100vw - "+scrollWidth+"px); margin: 0 calc("+(scrollWidth/2)+"px - 50vw) 0 calc(100% + "+(scrollWidth/2)+"px - 50vw);}";
var style = document.createElement('style');
style.textContent = x;
document.querySelector("head").appendChild(style);
    });

</script>
</body>
</html>

Цитата:

Сообщение от LADYX

108px

ну да, я так понимаю, 8 - это половина ширины полосы прокрутки, ну так же?

Цитата:

Сообщение от LADYX

из-за этого может быть и не работает

Прошу меня простить. И этот вариант работает. Это моя ошибка. Просто у меня блок .wrp идет не класс, а ид. И мне нужна было в скрипте указать не

$('.wrp')

$('#wrp')

Это моя невнимательность, простите. Всё работает, как нужно.
Nexus,
рони,
Огромное спасибо!

рони,

Цитата:

Сообщение от рони

calc("+(100+scrollWidth/2)+"px - 50vw);

Лучше так:

calc(100% + "+(scrollWidth/2)+"px - 50vw);

рони,
последний ваш пост - тоже очень интересный вариант, обязательно заберу себе его в блокнот.

рони,
Nexus,
ОГРОМНЕЙШЕЕ ВАМ СПАСИБО!!!

Nexus,
заменил

Немного изменил генерируемый css.

<!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;

}
</style>
</head>

<body>

<div class="wrapper">
много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста
<div class="wrp">Этот блок нужно растянуть по ширине экрана, за пределы его родителя</div>
много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста
</div>
<script>
	window.addEventListener('DOMContentLoaded', function() {
		var scrollWidth = window.innerWidth  - document.documentElement.clientWidth ;
		var x = '.wrp{'
			+'width: calc(100vw - '+scrollWidth+'px);'
			+'margin-left:calc(-.5 * (100vw - '+scrollWidth+'px) + 100%);'
		+'}';
		var style = document.createElement('style');
		style.textContent = x;
		document.querySelector("head").appendChild(style);
	});
</script>
</body>
</html>

Тут можно ширину окна изменить рил тайм:
https://jsfiddle.net/j2e6pL1t/
PS. Если изменить ширину .wrapper, то работает неправильно.