缩放可滚动容器中的中心div [英] scaling a centered div in a scrollable container

问题描述

我试图对以可滚动容器div为中心的div进行缩放转换。

I'm trying to do a scale transformation on a div that is centered on a scrollable container div.

我使用的技巧来反映新的div

The trick i'm using to reflect the new div size after transformation, is using a wrapper and setting the new width/height to it so the parent can show the scrollbars correctly.

.container {
    position: relative;
    border: 3px solid red;
    width: 600px; height: 400px;
    background-color: blue;
    overflow-x: scroll; overflow-y: scroll;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}
.wrapper {
    order: 1;
    background-color: yellow;
}
.content-outer {
    width: 300px;
    height: 200px;
    transform-origin: 50% 50%;
    /*transform-origin: 0 0;*/
}
.content-outer.animatted {
    animation: scaleAnimation 1s ease-in forwards;
}
.content-outer.animatted2 {
    animation: scaleAnimation2 1s ease-in forwards;
}
.content-inner {
    width: 300px;
    height: 200px;
    background: linear-gradient(to right, red, white);
}

如果转换原点为0,0，div居中而没有动画跳转，滚动条不正确。如果原点在中间的div位置和滚动条错过了

if the transformation origin was 0,0 the div is centered without animation jumps but the scrollbars are not correct. if the origin was in the middle both the div location and scrollbars are missed up

我尝试了两种方法做中心，使用flexbox（ http://jsfiddle.net/r3jqyjLz/1/ ）并使用负边距
（ http://jsfiddle.net/roLf5tph/1/ ）。

I have tried two ways to do the centering, using flexbox (http://jsfiddle.net/r3jqyjLz/1/) and using negative margins (http://jsfiddle.net/roLf5tph/1/).

有更好的方法吗？

推荐答案

这是你在做什么？

我对缩放动画使用CSS转换。

I used CSS transitions for the scaling animation.

#centered {
    background-image: linear-gradient(to bottom,yellow,red);
    height: 200px;
    transform: scale(1);
    transition: transform 1s ease-out;
    width: 200px;
}

#scrollable {
    align-items: center;
    border: 1px solid red;
    display: flex;
    height: 300px;
    justify-content: center;
    overflow: auto;
    width: 300px;
}

更新＃1

这个怎么样？

• 使用老派绝对中心（位置绝对）


• 我看到你对flexbox的看法。看来，当中心元素大于容器时，flexbox居中有一些限制。

这篇关于缩放可滚动容器中的中心div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！