.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时).
作为旁注,转换是一种不影响布局的视觉效果,因此逻辑上滚动不应在所有情况下改变.
最佳答案
我在w3.org website中发现了一些关于可分解溢出的令人困惑的陈述,这可能解释了为什么实现不一致.它们看起来更像是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的变通方法.或者转换容器而不是子容器.甚至可以创建一个额外的投币器级别.
希望能帮助到你！
