js 改变html scale,javascript – 使用CSS变换scale()放大元素而不进行裁剪,维护滚动

为什么不只是将TransformOrigin重新定位到0,并在动画后使用正确的scrollTop / scrollLeft？

如果您不需要动画,TransformOrigin总是保持0 0,只有滚动才能显示该框.

为了使动画变得不那么有用,只能使用转换条件进行转换,否则转换起点也会被动画化.我已经编辑了4×4元素的例子,但是我认为将一个框完全放大到视图是有意义的,这就是为什么我改变了缩放级别.但是,如果你保持缩放级别2和网格尺寸15×15,那么使用这种方法,真正的原点应该被计算为transform,然后也是正确的滚动.

反正我不知道,如果你觉得这个方法很有用.

堆栈片段

var zoomedIn = false;

var zoomContainer = $("#zoom-container");

$(".box").click(function(event) {

var el = this;

if (zoomedIn) {

zoomContainer.css({

transform: "scale(1)",

transformOrigin: "0 0"

});

zoomContainer.parent().scrollTop(0).scrollLeft(0);

zoomedIn = false;

return;

}

zoomedIn = true;

var $el = $(el);

animate($el);

zoomContainer.on('transitionend', function(){

zoomContainer.off('transitionend');

reposition($el);

})

});

var COLS = 4, ROWS = 4,

COLS_STEP = 100 / (COLS - 1), ROWS_STEP = 100 / (ROWS - 1),

ZOOM = 4;

function animate($box) {

var cell = getCell($box);

var col = cell.col * COLS_STEP + '%',

row = cell.row * ROWS_STEP + '%';

zoomContainer.parent().css('overflow', 'hidden');

zoomContainer.css({

transition: 'transform 0.2s ease-in-out',

transform: "scale(" + ZOOM + ")",

transformOrigin: col + " " + row

});

}

function reposition($box) {

zoomContainer.css({

transition: 'none',

transform: "scale(" + ZOOM + ")",

transformOrigin: '0 0'

});

zoomContainer.parent().css('overflow', 'auto');

$box.get(0).scrollIntoView();

}

function getCell ($box) {

var idx = $box.index();

var col = idx % COLS,

row = (idx / ROWS) | 0;

return { col: col, row: row };

}

* { margin: 0; }

body, html { height: 100%; }

#container {

height: 100%;

width: 50%;

margin: 0 auto;

overflow: hidden;

}

#zoom-container {

height: 100%;

width: 100%;

will-change: transform;

}

.box {

float: left;

width: 25%;

height: 25%;

color: white;

text-align: center;

}

.red { background: red; }

.blue { background: blue; }

.green { background: green; }

.black { background: black; }

.l { opacity: .3 }

A

B

C

D

E

F

G

H

I

J

K

L

M

N

O

P