Получить CSS масштабирование, чтобы изменить вертикальную полосу прокрутки? - PullRequest
Новая
       12

Получить CSS масштабирование, чтобы изменить вертикальную полосу прокрутки?

0 голосов
/ 10 марта 2019

Я пытаюсь увеличить или уменьшить масштаб элемента, используя масштабное преобразование CSS.Я могу правильно масштабировать.Однако преобразование влияет только на горизонтальную полосу прокрутки .Вертикальная полоса прокрутки не является.

Я знаю, что CSS-преобразования не должны влиять на размеры элементов.Очевидно, что они do влияют на размеры и расположение элементов - но только по горизонтали.

Вот пример, демонстрирующий это: 

.wrapper {
  background: orange;
}

p {
  font-size: 50em;
  margin: 0px;
  transform: scale(1.0);  /* Change to scale(0.2) to see the horizontal scroll bar disppear */
  transform-origin: top left;
}
<div class="wrapper">
  <p>LargeText</p>
</div>

Измените шкалу на 0,2 и посмотрите, как горизонтальная полоса прокрутки правильно исчезает, а вертикальная - нет.

Как получитьбраузер, чтобы удалить вертикальную полосу прокрутки, если это не нужно, так же, как это делает с горизонтальной полосой прокрутки?

Я проверял это с Chrome и Firefox.

1 Ответ

1 голос
/ 10 марта 2019

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

Я изменил пример, который вы опубликовали, чтобы было легко играть в интерактивном режимекоэффициент масштабирования: 

.wrapper {
  --scale: 1.0;
  background: orange;
}

p {
  font-size: 7.5em;
  margin: 0px;
  transform: scale(var(--scale));  /* Change to scale(0.2) to see the horizontal scroll bar disppear */
  transform-origin: top left;
}
<input type="range" id="scale" min="0.05" value="1" max="4" step="0.05" oninput="document.querySelector('.wrapper').style.setProperty('--scale', this.value)">
<div class="wrapper">
  <p>LongText</p>
</div>

В заданном по умолчанию размере фрагмента stackoverflow элемент <p> соответствует высоте и ширине, поэтому полосы прокрутки не отображаются:

default scaling

Увеличение шкалы приводит к переполнению в обоих направлениях:

bigger scaling with overflow

То, что вы видите в своемНапример, всегда ли происходит вертикальное переполнение из-за высоты элемента <p>, которая равна 50em:

vertical overflow

Поскольку *Правило 1035 * не уменьшает собственного размера абзаца, оно всегда будет по крайней мере 50em, почти всегда вызывая вертикальное переполнение.

Что касается использования этих знаний для решения вашей проблемы, я бы порекомендовал начатьс размером по умолчанию auto и использованием scale > 1 для увеличения, а не наоборот.

...