这是一个显示我的问题的代码

.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;
}

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;
}

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;
}

Box.

为什么在最初的情况下,我们有不同的行为？为什么在某些情况下,比例改变滚动(当我们使用position：absolute时),而在其他情况下它不改变(当我们使用display：inline-block时).

作为旁注,转换是一种不影响布局的视觉效果,因此逻辑上滚动不应在所有情况下改变.