javascript – 在div转换后垂直定位内容

2023年2月13日 146次阅读

我在div中有内容,我试图根据用户的偏好进行扩展.我使用
Louis Remi’s transform.js来做到这一点.

但是,当我这样做时,它要么：

>将内容推送到div的顶部(按比例切断内容)
>将内容推向容器太远(在缩小时留下大量空白区域)

我已经尝试在DOM上调用此代码片段了

$(“#zoomMe”).css({‘transform’：’scale(.50)’,’top’：’ – 2280px’});

但这只适用于特定的高度.我想知道无论如何我都可以将内容推到div的顶部,即使我的容器改变了高度.

这是一个jsfiddle example.现在它是.50比例,显示内容位于屏幕中间,在div的顶部和底部留下了大量空间.

这是我想要实现的detailed picture.

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)' );
});

最佳答案 我相信你所寻找的是变形起源

http://css-tricks.com/almanac/properties/t/transform-origin/

这将使您能够在元素上设置将在转换​​发生时保持不变的点.通过将transform-origin设置为顶部中心：您可以缩放元素并在相同位置保持其相对于顶部的位置.

点赞