Как отлаживать 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%)

Вопрос задан более трёх лет назад
83 просмотра

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

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

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

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

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

CSS

Простой
Можно ли в CSS сгладить углы при использовании border-radius?
- 1 подписчик
- час назад
- 44 просмотра
0

ответов
CSS

+2 ещё

Простой
Как корректно настроить Gulp + Sass?
- 1 подписчик
- 17 часов назад
- 49 просмотров
1

ответ
HTML

+1 ещё

Простой
Как разместить элементы с разных блоков, чтобы они перекрывали друг друга?
- 1 подписчик
- 23 часа назад
- 47 просмотров
1

ответ
CSS

Простой
Как сделать border со смещением?
- 1 подписчик
- вчера
- 95 просмотров
1

ответ
JavaScript

+1 ещё

Простой
Как перевести перевести top в translateY?
- 1 подписчик
- вчера
- 81 просмотр
1

ответ
HTML

+1 ещё

Простой
Flex и position: sticky, почему не работает?
- 1 подписчик
- 19 нояб.
- 70 просмотров
1

ответ
JavaScript

+2 ещё

Средний
Как выделить мышкой область на странице и присвоить класс элементам попавшим в эту область?
- 1 подписчик
- 19 нояб.
- 102 просмотра
1

ответ
JavaScript

+3 ещё

Средний
Как сделать слайдер на swiper, в котором активный слайд всегда крайний слева?
- 1 подписчик
- 19 нояб.
- 113 просмотров
1

ответ
HTML

+1 ещё

Простой
Как сделать метку/ярлык?
- 1 подписчик
- 18 нояб.
- 42 просмотра
0

ответов
CSS

Простой
Как сверстать данный блок?
- 1 подписчик
- 18 нояб.
- 89 просмотров
3

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

Fullstack Developer под Wordpress

Future Search

от 90 000 до 150 000 ₽

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

Rocket • Смоленск

от 80 000 до 130 000 ₽

Trainee - IT Support

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

от 2 000 до 4 000 $

Смонтировать видео с выставки

22 нояб. 2024, в 11:53

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

Настроить и запустить сервер World of Warcraft 3.3.5a

22 нояб. 2024, в 11:51

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

Создать личный кабинет Битрикс

22 нояб. 2024, в 11:50

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

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

Само действие изменять логику работы браузера является не правильным.
Алексей Дубровин, но вить нужно )) все работает правильно кроме получения ширины скрола в риалтайме, а я не могу понять почему 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?

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

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

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