Question

这是显示我的问题的代码

.container {
  width: 200px;
  height: 200px;
  overflow: auto;
}

.child {
  width: 400px;
  height: 400px;
  /* When scaling down, no more X scrolling because size is 200px, but still Y scrolling :( */
  transform: scale(0.5);
  /* Both axis working the same (no more scrolling) when absolutely positioned */
  /* position: absolute; */
}

/* Irrelevant styling */
.container {
  border: 2px solid palevioletred;
  position: relative;
}

.child {
  background-color: pink;
  transform-origin: top left;
}

<div class="container">
  <div class="child">
    Child
  </div>
</div>

Try to scroll down or right within the box.

有一个固定大小的容器，其中也包含一个固定大小的孩子。
滚动溢出。
然后我通过变换将孩子缩小，将孩子的大小减半。
- X滚动消失是因为子级的宽度为200px（更具体地说，容器的scrollWidth属性已相应缩小）
- Y滚动仍然存在，并且容器的scrollHeight属性仍然相同。

我可以稍微理解每个轴的行为，但不能理解为什么它们的行为不同。

理想情况下，我希望Y轴的行为像X轴。

如果我在孩子上设置position:absolute，则Y轴充当X轴（两个滚动消失）。

.container {
  width: 200px;
  height: 200px;
  overflow: auto;
}

.child {
  width: 400px;
  height: 400px;
  position:absolute;
  transform: scale(0.5);
}

/* Irrelevant styling */
.container {
  border: 2px solid palevioletred;
  position: relative;
}

.child {
  background-color: pink;
  transform-origin: top left;
}

<div class="container">
  <div class="child">
    Child
  </div>
</div>

Try to scroll down or right within the box.

设置display:inline-block时也是如此。两个轴的行为相同（两个滚动都不受缩放比例影响）

.container {
  width: 200px;
  height: 200px;
  overflow: auto;
}

.child {
  width: 400px;
  height: 400px;
  display:inline-block;
  transform: scale(0.5);
}

/* Irrelevant styling */
.container {
  border: 2px solid palevioletred;
  position: relative;
}

.child {
  background-color: pink;
  transform-origin: top left;
}

<div class="container">
  <div class="child">
    Child
  </div>
</div>

Try to scroll down or right within the box.

为什么在最初的情况下，我们有不同的行为？以及为什么在某些情况下比例会改变滚动（当我们使用position:absolute时），而在其他情况下却没有改变滚动（当我们使用display:inline-block时）。

请注意，transform是一种视觉效果，不会影响布局，因此从逻辑上讲，滚动在所有情况下均不应更改。

Answer 1

我在w3.org website中发现了一些关于可重复溢出的令人困惑的陈述，它们可能解释了为什么实现不一致。由于它是草稿，因此它们看起来更像TODO标记：

问题1：

在滚动模型上存在分歧。 2.1明显定义   您滚动了 content 区域；内容会溢出   内容框，然后将溢出内容框与内容框合并   找到可滚动区域。特别是，这意味着内容   会被起始边填充物抵消，但是如果溢出，它将   将直接到达末端的边缘。这就是Firefox和   IE浏览器。至少有些作者（和规范作者）改为   填充框可以滚动的思维模型，所以当您   滚动到溢出的末尾，有右边/右边的填充。   Chrome / WebKit至少要对块轴执行此操作。他们有点   与内联轴不一致；关于如何有一些奇怪的地方   他们处理线框。

似乎块轴填充可能与Web兼容   荣誉。目前尚不清楚行内轴填充会是多少。进一步   需要实验。

问题2：

这种处理变换的描述是否足够准确？

注意：

可滚动溢出矩形始终是框自身的坐标系，但在其他坐标系中可能不是矩形的坐标系由于变换[CSS3-TRANSFORMS]。这表示滚动条有时在不需要时会出现。

无论如何，似乎我们需要依靠“ position：absolute”作为Chrome的解决方法。或转换容器而不是子容器。甚至创建一个额外的硬币容器级别。

希望有帮助！

Answer 2

我相信行为上的差异与转换源有关。调整原点以便将子级放置在右侧而不是左侧（并且删除了内联块显示）时，将再次出现水平滚动，并且仅在滚动时才可见该子级（请参见代码段）。由于孩子的default 'static' position（即使不进行转换）也会从容器的顶部显示，这就是为什么它不会像我理解的那样影响垂直滚动的原因。

正如其他人所指出的，关于CSS转换，还有许多艰巨的任务。我不会将其视为错误（尽管我明白您的意思）。也许将来从w3c中可以获得更好的解释/更加清晰。

.container {
  width: 200px;
  height: 200px;
  overflow: auto;
  border: 2px solid palevioletred;
  position: relative;
}

.child {
  width: 400px;
  height: 400px;
  transform: scale(0.5);
  background-color: pink;
  transform-origin: top right;
}

<div class="container">
  <div class="child">
    Child
  </div>
</div>

Transform-origin changed to top right (as opposed to top left)

缩放子项上的溢出滚动：X和Y轴上的行为不同

2 个答案: