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

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 网站上发现了一些关于可伸缩溢出的令人困惑的陈述，它们可能解释了为什么实现不一致。它们看起来更像是 TODO 标记，因为它是草稿：

\n\n

问题一：

\n\n

\n

对于滚动模型存在\xe2\x80\x99s 分歧。2.1 明显定义\n您滚动了内容区域；内容将溢出内容框，您可以将溢出与内容框结合起来以找到可滚动区域。特别是，这意味着内容将被起始侧填充偏移，但如果溢出，它将直接到达结束侧的边缘。这就是 Firefox 和\n IE 所做的事情。至少一些作者（和规范作者）有这样的心理模型：填充框是可滚动的，因此当您滚动到溢出的末尾时，会出现\xe2\x80\x99s右/底部填充。\n Chrome/WebKit 至少对块轴执行此操作。它们\xe2\x80\x99对于内嵌轴来说有些不一致；他们处理线框的方式有一些奇怪的地方。

\n\n

看来块轴填充可能是与网络兼容的。\xe2\x80\x99 不清楚内联轴填充是什么。需要进一步的实验。

\n

\n\n

问题2：

\n\n

\n

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

\n

\n\n

笔记：

\n\n

\n

可滚动溢出矩形始终是 box\xe2\x80\x99 自己的坐标系中的矩形，但由于变换 [CSS3-TRANSFORMS]，在其他坐标系中可能不是矩形。这意味着滚动条有时会​​在实际上不需要时出现。

\n

\n\n

不管怎样，我们似乎需要依靠“position:absolute”作为 Chrome 的解决方法。或者改造容器而不是子容器。或者甚至创建一个额外的硬币容器级别。

\n\n

希望能帮助到你！

\n