CSS Transform比例滚动问题答案

【问题标题】：CSS Transform scale scrolling issueCSS Transform比例滚动问题
【发布时间】：2015-08-09 10:54:00
【问题描述】：

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

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

对于我的问题的实际观点，这里是一个带有我的代码的 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 */
}

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

【问题讨论】：

标签： html css transform

【解决方案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

【讨论】：

这个答案在谷歌搜索 1 小时后保护了我的代码。谢谢博格丹 :)。