这是一个代码显示我的问题
.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属性相应地缩小了)
-
我能理解每个轴的行为,但不能理解为什么
他们的行为不同了
.
如果我设置
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”>
孩子
</div>
</div>
尝试在框内向下或向右滚动。
当我开始的时候也是一样
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”>
孩子
</div>
为什么在最初的情况下,我们有不同的行为?为什么在某些情况下,比例会改变卷轴(当我们使用
位置:绝对
)而在其他情况下(当我们使用
).
作为旁注,
transform
是一种不影响布局的视觉效果,因此从逻辑上讲,滚动条在所有情况下都不应改变。
