html 占用空间 滚动轴_html – 缩放子级上的溢出滚动：X和Y轴上的不同行为

>有一个固定大小的容器,包含一个固定大小的儿童.

>有溢出滚动.

>然后,我通过转换缩小孩子,将其大小减半.

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

}

当我设置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;

}

为什么在最初的情况下,我们有不同的行为？为什么在某些情况下,比例改变滚动(当我们使用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的变通方法.或者转换容器而不是子容器.甚至可以创建一个额外的投币器级别.

希望能帮助到你！

总结

如果觉得编程之家网站内容还不错，欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。

如您喜欢交流学习经验，点击链接加入编程之家官方QQ群：1065694478