在 div 变换后定位内容

Question

我有一个包含在div中的内容，我正在尝试根据用户的偏好进行缩放。 我使用Louis Remi's transform.js来实现这一点。

然而，当我这样做时，它会将内容推到远离div的顶部（在缩小时切断内容）或远离容器的底部（在放大时留下很多空白空间）。

我想知道是否有任何方法可以将内容推到固定在div的顶部？

这里是一个jsfiddle示例。 现在它处于0.50缩放状态，显示内容位于屏幕中央，上下留下很多空间。

HTML

<div id="reportContainer">
    <div id="zoomMe">
        <div id="content1" class="fillerBox">&nbsp;</div>
        <div id="content2" class="fillerBox">&nbsp;</div>
        <div id="content3" class="fillerBox">&nbsp;</div>
        <div id="content4" class="fillerBox">&nbsp;</div>
        <div id="content5" class="fillerBox">&nbsp;</div>
    </div>
</div>

CSS

#reportContainer { margin: 0;padding:15px;overflow-y:scroll;overflow-x:hidden; border:2px solid black;}
.fillerBox { background-color:#ccc;border:1px dashed #000;height:1500px;width:910px;margin:0 auto;margin-bottom:30px; }

JS

$(document).ready(function() {
    $("#reportContainer").height($(window).height()-50);
    $("#zoomMe").css('transform', 'scale(.50)' );
});

- bryan

---

将比例缩放为“1”，而不是“0.50”。 - Ani

@ani 缩放为 1 并不进行任何缩放。我正在尝试为用户添加一个放大/缩小功能。 - bryan

那么我所看到的唯一解决方案就是将位置设置为绝对定位，并将其移动到正确的位置 - 对于#zoomme元素。 - Ani

@ani，我希望你不要这么说，但我想这也不算太糟糕。目前我有类似这样的代码 $("#zoomMe").css({ 'transform' : 'scale(.50)', 'top' : '-2280px' }); - 你有什么建议可以让它自适应容器大小并进行缩放吗？ - bryan

不在我脑海中。这里有一个简单的例子：使用windowrezise函数并使用总高度和窗口高度比计算高度。有意义吗？ - Ani

Answer 1

在我的另一个问题中，有个好心人已经回答了这个问题，但是由于有人点赞了我的问题，我想我也把他放在这里。

CSS有一个很棒的选项可以追加转换后的元素。感谢stackoverflow论坛上的一位用户的帮助，我最终采用了这种方法。

-webkit-transform-origin: top center;
-moz-transform-origin: top center;
transform-origin: top center;

- bryan