时间戳

首页 > 解决方案 > 在子容器上使用 CSS 变换时如何在父容器上手动设置溢出大小？

javascript - 在子容器上使用 CSS 变换时如何在父容器上手动设置溢出大小？

问题描述

我知道 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>

标签： javascripthtmlcssoverflowcss-transforms

解决方案

好吧，您可以在容器内使用伪元素...

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

那应该强制溢出。我使用负 z-index 来确保它不与内容交互。

注意：如果缩放是动态的，那么实际创建一个空元素（伪类很难通过 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)
}

推荐阅读