html - 缩放子 : different behavior on X and Y axis 上的溢出滚动

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.

• 有一个固定大小的容器，其中包含一个固定大小的 child 。
• 有溢出滚动。

• 然后我通过转换缩小子项，使其大小减半。

  • X 滚动条消失了，因为 child 的宽度是 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 中发现了一些令人困惑的陈述关于 scollable 溢出，这可能解释了为什么实现不一致。它们看起来更像是 TODO 标记，因为它是草稿:

问题 1:

There’s disagreement on the scrolling model. 2.1 apparently defined that you scrolled the content area; the content would overflow the content-box, and you would union that overflow with the content box to find the scrollable area. In particular, this means that the content would be offset by the start-sides padding, but if it overflowed, it would go right to the edge on the end sides. This is what Firefox and IE do. At least some authors (and spec authors) instead have the mental model that the padding box is what’s scrollable, so when you scroll to the end of the overflow, there’s the right/bottom padding. Chrome/WebKit do this for the block axis, at least. They’re somewhat inconsistent for the inline axis; there’s something weird about how they handle lineboxes.

It seems that the block-axis padding is probably web-compatible to honor. It’s unclear that the inline-axis padding will be. Further experimentation is needed.

问题 2:

Is this description of handling transforms sufficiently accurate?

注意:

The scrollable overflow rectangle is always a rectangle in the box’s own coordinate system, but might be non-rectangular in other coordinate systems due to transforms [CSS3-TRANSFORMS]. This means scrollbars can sometimes appear when not actually necessary.

无论如何，看来我们需要依赖“position:absolute”作为 Chrome 的解决方法。或者改造容器而不是 child 。或者甚至创建一个额外的硬币容器级别。

希望对您有所帮助!