Как отлаживать css?

Question

dominy @dominy

CSS
Sass

Как отлаживать css?

Здравствуйте, я хочу сделать так чтоб появление скрола не смещало элементы, для этого я
знаю ширину дива $width: 100vmin;
знаю ширину появляющегося скрола $scroll-width: 0.5vmin;
питаюсь посчитать ширину скрола в риалтайм используя (offsetWidth - clientWidth ) $realtime-scroll-width: calc(#{$width} - 100%); (падингов и бордеров нет)
считаю смещение для отсутствующего скрола

$scroll-additional-gap: calc(#{$scroll-width} - #{$realtime-scroll-width});

Но судя по всему это считается не правильно и я не знаю как отладить значения или посмотреть на промежуточный результат, возможна ли отладка css относительно значений в пикселях (чтоб к примеру узнать чему равен 100%)

Вопрос задан более двух лет назад
82 просмотра

11 комментариев

Подписаться 1 Простой 11 комментариев

Алексей Дубровин @alekcena

Но судя по всему это считается не правильно

Само действие изменять логику работы браузера является не правильным.

Написано более двух лет назад
dominy @dominy Автор вопроса

Алексей Дубровин, но вить нужно )) все работает правильно кроме получения ширины скрола в риалтайме, а я не могу понять почему offsetWidth - clientWidth вероятно равно 0 когда скрол сущевствует((

Написано более двух лет назад
Андрей Федоров @aliencash

Просто показывайте скролл всегда, даже когда он не нужен.

Написано более двух лет назад
dominy @dominy Автор вопроса

Андрей Федоров, Я использовал такой метод когда он background:transparent; а сейчас приходится игратся))
В итоге document.getElementById("qwerty").offsetWidth = 361
а document.getElementById("qwerty").clientWidth 354
тоесть js правильно считает ширину скрола но css не хочет((

Когда я делал calc я расчитывал что width:100vmin; - ето offsetWidth;
а когда дочерний елемент ставит width:100%; - ето clientWidth родителя

Написано более двух лет назад

dominy @dominy Автор вопроса

В итоге получилось

<!DOCTYPE html>

<body>
	<div class="main">
		<div class="wrapper">
			<div class="child"></div>
		</div>
	</div>
</body>
<style>
	body {
		overflow: hidden;
		margin: 0;
		padding: 0;
	}

	.main {
		width: 100%;
		overflow-x: hidden;
		overflow-y: auto;
		width: 100vmin;
		height: 100vmin;
		background: green;
		direction: rtl;
	}

	.main::-webkit-scrollbar {
		width: 0.5vmin;
		height: 100%;
		background-color: grey;
	}

	.main::-webkit-scrollbar-thumb {
		background: blue;
	}

	.wrapper {
		direction: ltr;
	}

	.child {
		margin-left: calc(0.5vmin - (100vmin - 100%));
		background: yellow;
		width: 10vmin;
		height: 100vmin;
	}
</style>

</html>

Но как посмотреть чему равен 100% в пикселях в каком-то блоке так и не нашел((

Написано более двух лет назад

Андрей Федоров @aliencash

dominy, я считаю, что это сизифов труд - всегда найдется браузер с другим размером скролла и ваша верстка рассыпется.

Написано более двух лет назад
dominy @dominy Автор вопроса

Да вы правы в firefox все слетит, потому что я не знаяю ширины скролла - но какже не попробовать))

Написано более двух лет назад
dominy @dominy Автор вопроса
Хотя теоретичеси метод универсален и если можно js-ом получить размер скролла то то можно и
--realtime-scroll-width: v-bind(realtimeScrollWidth).

Я тут подумал, раз я могу поставить значение, как-бы хотелось сюда прикрутить директиву Vue 3, дающею значение в realtime-scroll-width.
Тоесть раз я могу поставить директиву в template-часть поддерживает ли vue какое либо апи для css (кроме связывания переменных) создаюшее что-то на подобие директив...
Написано более двух лет назад
Сергей delphinpro @delphinpro Куратор тега CSS

Это обычно решается простейшим скриптом.
Программно вычисляется ширина скроллбара (легко нагуглить) и добавляется/убирается класс на корневом элементе, которым для body устанавливается правый марджин, равный ширине скроллбара.

Написано более двух лет назад
Сергей delphinpro @delphinpro Куратор тега CSS
dominy,
поддерживает ли vue какое либо апи для css

Вы можете напрямую писать стили

computed: { calculatedWidth() { return '120px'; } }

<div :style="{width: calculatedWidth}"> </div>
Написано более двух лет назад
Сергей delphinpro @delphinpro Куратор тега CSS

Но как посмотреть чему равен 100% в пикселях в каком-то блоке так и не нашел((

Вычисленное значение можно посмотреть здесь:

Написано более двух лет назад

Пригласить эксперта

Ответы на вопрос 1

Комментировать

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации

Похожие вопросы

HTML

+1 ещё

Простой
Выровнить картинку по центру в тексте, чтобы не зависимости всегда была по центру?
- нет подписчиков
- 7 часов назад
- 45 просмотров
1

ответ
CSS

Простой
Как создать нормальный размер картинки на php?
- 1 подписчик
- 16 часов назад
- 52 просмотра
0

ответов
JavaScript

+1 ещё

Простой
Галерея через сборку строки JS не позиционируется?
- 1 подписчик
- 18 часов назад
- 69 просмотров
0

ответов
CSS

Простой
Как сверстать не стандартный макет?
- 1 подписчик
- вчера
- 77 просмотров
2

ответа
HTML

+1 ещё

Простой
Почему схлопываются внешние отступы соседних элементов?
- 1 подписчик
- вчера
- 60 просмотров
0

ответов
CSS

+3 ещё

Простой
Как увеличить QPushButton на 105% через stylesheet?
- 1 подписчик
- вчера
- 31 просмотр
1

ответ
HTML

+2 ещё

Простой
Почему моргает видеофон на сайте?
- 1 подписчик
- 03 мая
- 87 просмотров
0

ответов
CSS

Простой
В контейнере шириной 100% при разрешении 320рх кнопка вылазит за его пределы. как поставить ее в правый верхний угол?
- 3 подписчика
- 03 мая
- 477 просмотров
0

ответов
CSS

Простой
Как сделать такую границу?
- 2 подписчика
- 02 мая
- 191 просмотр
0

ответов
JavaScript

+2 ещё

Простой
Добавление определенного класса к header при прокрутке до определенного блока?
- 1 подписчик
- 02 мая
- 72 просмотра
0

ответов
Показать ещё Загружается…

JavaScript разработчик

вАйТи

от 5 000 до 25 000 ₽

Trainee - IT Support

move2usajobs.com LLC • Лос-Анджелес

от 2 000 до 4 000 $

React разработчик

Uptrade

от 150 000 до 200 000 ₽

Сделать автоматизацию действий на сайте

06 мая 2024, в 02:13

8000 руб./за проект

Разработать скрипт на терафлрме для деплоймеета

06 мая 2024, в 01:10

30000 руб./за проект

Правки в Laravel админку с тг ботами

05 мая 2024, в 23:43

8000 руб./за проект

Но судя по всему это считается не правильно

Само действие изменять логику работы браузера является не правильным.
Алексей Дубровин, но вить нужно )) все работает правильно кроме получения ширины скрола в риалтайме, а я не могу понять почему offsetWidth - clientWidth вероятно равно 0 когда скрол сущевствует((
Просто показывайте скролл всегда, даже когда он не нужен.
Андрей Федоров, Я использовал такой метод когда он background:transparent; а сейчас приходится игратся))
В итоге document.getElementById("qwerty").offsetWidth = 361
а document.getElementById("qwerty").clientWidth 354
тоесть js правильно считает ширину скрола но css не хочет((

Когда я делал calc я расчитывал что width:100vmin; - ето offsetWidth;
а когда дочерний елемент ставит width:100%; - ето clientWidth родителя
В итоге получилось

<!DOCTYPE html> <body> <div class="main"> <div class="wrapper"> <div class="child"></div> </div> </div> </body> <style> body { overflow: hidden; margin: 0; padding: 0; } .main { width: 100%; overflow-x: hidden; overflow-y: auto; width: 100vmin; height: 100vmin; background: green; direction: rtl; } .main::-webkit-scrollbar { width: 0.5vmin; height: 100%; background-color: grey; } .main::-webkit-scrollbar-thumb { background: blue; } .wrapper { direction: ltr; } .child { margin-left: calc(0.5vmin - (100vmin - 100%)); background: yellow; width: 10vmin; height: 100vmin; } </style> </html>
Но как посмотреть чему равен 100% в пикселях в каком-то блоке так и не нашел((
dominy, я считаю, что это сизифов труд - всегда найдется браузер с другим размером скролла и ваша верстка рассыпется.
Да вы правы в firefox все слетит, потому что я не знаяю ширины скролла - но какже не попробовать))
Хотя теоретичеси метод универсален и если можно js-ом получить размер скролла то то можно и
--realtime-scroll-width: v-bind(realtimeScrollWidth).

Я тут подумал, раз я могу поставить значение, как-бы хотелось сюда прикрутить директиву Vue 3, дающею значение в realtime-scroll-width.
Тоесть раз я могу поставить директиву в template-часть поддерживает ли vue какое либо апи для css (кроме связывания переменных) создаюшее что-то на подобие директив...
Это обычно решается простейшим скриптом.
Программно вычисляется ширина скроллбара (легко нагуглить) и добавляется/убирается класс на корневом элементе, которым для body устанавливается правый марджин, равный ширине скроллбара.
dominy,
поддерживает ли vue какое либо апи для css

Вы можете напрямую писать стили

computed: { calculatedWidth() { return '120px'; } }

<div :style="{width: calculatedWidth}"> </div>
Но как посмотреть чему равен 100% в пикселях в каком-то блоке так и не нашел((

Вычисленное значение можно посмотреть здесь:

Answer 1 · 2021-07-30 11:58:20

В комментариях написал, что лучше решать задачу джаваскриптом.
Но и на css можно решить примерно так:

Обращаем внимание на красный правый квадрат – он не смещается.

Как отлаживать css?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт