代码之家 › 专栏 › 技术社区 › Renaud

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

scrollbar css3 css html

Renaud · 技术社区 · 6 年前

这是一个代码显示我的问题

.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 是一种不影响布局的视觉效果,因此从逻辑上讲,滚动条在所有情况下都不应改变。

2 回复 | 直到 6 年前

Fabio Manzano 6 年前

我在书中发现了一些令人困惑的说法 w3.org website

问题1:

在滚动模式上存在分歧。2.1明确定义你滚动了区域;内容将溢出内容框,并将溢出的内容与内容框合并到会一直到末端的边缘。这就是Firefox和我知道。至少有些作者(和规范作者)拥有心理模型认为填充框是可滚动的,所以当你滚动到溢出的末尾,有右/下填充。 Chrome/WebKit至少可以为块轴这样做。他们有点内联轴不一致;如何他们处理接线盒。

荣誉。它不清楚内联轴填充将是。进一步实验是必要的。

对处理变换的描述是否足够准确?

注:

可滚动的溢出矩形始终是长方体拥有自己的坐标系,但在其他坐标系中可能不是矩形的滚动条有时会在不需要的时候出现。

希望有帮助!

Rachel Gallen 6 年前

default 'static' position (即使没有被转换)将从容器顶部显示,这就是为什么它不会以我理解的方式影响垂直滚动。

正如其他人所指出的,关于CSS转换还有很多未完成的任务。我不认为这是一个错误(尽管我明白你的意思)。也许将来w3c会提供更好的解释/更清晰的信息。

.container {
  width: 200px;
  height: 200px;
  overflow: auto;
  border: 2px solid palevioletred;
  position: relative;
}

.child {
  width: 400px;
  height: 400px;
  transform: scale(0.5);
  background-color: pink;
  transform-origin: top right;
}

<div class="container">
  <div class="child">
    Child
  </div>
</div>

Transform-origin changed to top right (as opposed to top left)