CSS变换缩放滚动问题 [英] CSS Transform scale scrolling issue

问题描述

我正在创建一个使用CSS'transform scale属性的网络应用程序。如下图所示，我有一个对象在一个容器，它适合内部和贴心，没有任何溢出的内容。这是我的愿望。

I am creating a web app that uses CSS' transform scale property. As shown by the image below, I have an object inside of a container, which fits nice and snugly inside, without any overflowing content. This is how I wish for it to be.

当我将对象重新缩放到大于容器的大小时，我的问题就出现了。如图所示，清楚地，对象大于容器。如可滚动区域的箭头和标签所示，容器可以滚动到这些区域，但是标记有hidden的部分由于其溢出而不可见或通过滚动可访问。

My issue is brought up when I re-scale the object to a size greater than the container. As shown by the image, clearly the object is larger than the container. As marked by the arrows and labels of "scrollable area", the container can scroll to these areas, but the parts labelled with "hidden" are not visible or accessible through the scroll due to their overflow.

对于我的问题的实际看法，这里有一个链接到代码与我的代码：

For a practical view of my issue, here's a link to a codepen with my code:

CodePen

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

Snippets of my CSS code area as follows:

#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 */
}

问题是阻止我的网络应用程序的开发，所以感谢您的时间和贡献。

This issue is holding back the development of my web app, so thanks in advance for your time and contributions.

推荐答案

我最好的猜测这是因为变换起源。尝试将其设置为 0 0 应修正您的问题：

My best guess would be that this is happening because of transform origin. Try setting it to 0 0 should fix Your issue:

#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变换缩放滚动问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！