Как вручную установить размер переполнения в родительском контейнере при использовании CSS-преобразования в дочернем? - PullRequest
Новая
       28

Как вручную установить размер переполнения в родительском контейнере при использовании CSS-преобразования в дочернем?

0 голосов
/ 25 июня 2019

Я понимаю, что CSS-преобразования не влияют на эффективный размер элемента, а только на его визуальное представление. Следующие посты обсуждают это:

Я также вижу следующие обсуждения, которые не совсем обсуждают расстояние перелива:

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

Проблема в том, что, поскольку CSS-масштабирование не влияет на фактический размер элемента, только при его визуальном представлении переполнение прокрутки устанавливается на исходные размеры элемента, которые либо слишком велики, либо слишком малы

Существует ли способ явного задания расстояния перелива для родителя, чтобы обойти эту проблему? Это может позволить мне сделать что-то вроде установки высоты переполнения на child height * scale и ширины на child width * scale на родительском элементе.

Я ожидаю, что фактическое значение масштабирования изменится с помощью пользовательского ввода, динамически изменяя размер элемента на лету.

Ниже приведен пример фрагмента проблемы в действии. 

.parent {
  overflow: scroll;
  height: 500px;
  width: 500px;
  background: black;
}
.child {
  background-image: url("https://i.redd.it/7ifkx5z39b631.jpg");
  transform: scale(0.25, 0.25);
  transform-origin: top left;
  height: 7000px;
  width: 4900px;
}
<div class="parent">
  <div class="child">
  </div>
</div>

1 Ответ

1 голос
/ 25 июня 2019

Ну, вы можете использовать псевдоэлемент внутри контейнера ... 

.parent:before {
     content: '';
     position: relative;
     z-index: -1;
     width: calc(4900px * 0.25);
     height: calc(7000px * 0.25);
}

Что должно вызвать переполнение.Я использую отрицательный z-индекс, чтобы убедиться, что он не взаимодействует с контентом.

Примечание: если масштабирование динамическое, вероятно, проще создать пустой элемент (псевдоклассы трудно контролировать через JS), а затем динамически управлять высотой / шириной, используя Javascript. 

<div class="parent">
  <div class="spacer"></div>
  <div class="child">
  </div>
</div>

И CSS 

.spacer {
     content: '';
     position: relative;
     z-index: -1;
     width: calc(4900px * 0.25);
     height: calc(7000px * 0.25);
}

Редактировать: Упс только что понял, что нужно идти меньше оригинала.Вышеописанное сработает, если новое переполнение будет больше начального состояния ...

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

.child {
     background-image: url("https://i.redd.it/7ifkx5z39b631.jpg");
     background-size: contain;
     width: calc(4900px * 0.25);
     height: calc(7000px * 0.25)
}
...