CSS 变换比例滚动问题

Question

我正在创建一个使用 CSS 变换比例属性的网络应用程序。如下图所示，我在一个容器内有一个对象，它非常适合放在里面，没有任何溢出的内容。这就是我希望的样子。

当我将对象重新缩放到大于容器的大小时出现了我的问题。如图所示，显然物体比容器大。正如 "scrollable area" 的箭头和标签所标记的，容器可以滚动到这些区域，但是带有 "hidden" 标记的部分由于溢出而无法通过滚动看到或访问。

为了更实际地看待我的问题，这里有一个 link 代码笔和我的代码：

CodePen

我的CSS代码区的片段如下：

#container {
  position: fixed;
  width: 300px;
  height: 200px;
  border: 1px solid #000000;
  left: 0px;
  top: 0px;
  margin-left: 330px;
  margin-top: 10px;
  overflow: scroll;
  display: block;
  text-align: center;
}

#object {
  position: relative;
  width: 120px;
  height: 120px;
  display: inline-block;
  background-color: rgba(255, 0, 255, 0.45);
  margin-top: 40px;
  border-radius: 25px;
  transform: scale(3); /* This would be scale(1) on the small object */
}

这个问题阻碍了我的网络应用程序的开发，所以提前感谢您的时间和贡献。

Answer 1

我最好的猜测是这是由于变换原点而发生的。尝试将其设置为 0 0 应该可以解决您的问题：

#object2 {
  position: relative;
  width: 120px;
  height: 120px;
  display: block;
  background-color: rgba(255, 0, 255, 0.45);
  border-radius: 25px;
  transform: scale(3);
  transform-origin: 0 0;
}

演示 codepen

CSS 变换比例滚动问题

CSS Transform scale scrolling issue

html

css

transform