Пример в реальном времени: https://jsfiddle.net/b8vLg0ny/
Можно использовать функции CSS scale и translate для масштабирования элемента.
Взять этот пример из 4-х ящиков в сетке 2x2.
HTML:
<div id="container">
<div id="zoom-container">
<div class="box red">A</div>
<div class="box blue">B</div>
<div class="box green">C</div>
<div class="box black">D</div>
</div>
</div>
CSS
* { margin: 0; }
body, html { height: 100%; }
#container {
height: 100%;
width: 50%;
margin: 0 auto;
}
#zoom-container {
height: 100%;
width: 100%;
transition: all 0.2s ease-in-out;
}
.box {
float: left;
width: 50%;
height: 50%;
color: white;
text-align: center;
display: block;
}
.red { background: red; }
.blue { background: blue; }
.green { background: green; }
.black { background: black; }
JavaScript:
window.zoomedIn = false;
$(".box").click(function(event) {
var el = this;
var zoomContainer = $("#zoom-container");
if (window.zoomedIn) {
console.log("resetting zoom");
zoomContainer.css("transform", "");
$("#container").css("overflow", "auto");
window.zoomedIn = false;
} else {
console.log("applying zoom");
var top = el.offsetTop;
var left = el.offsetLeft - 0.25*zoomContainer[0].clientWidth;
var translateY = 0.5*zoomContainer[0].clientHeight - top;
var translateX = 0.5*zoomContainer[0].clientWidth - left;
$("#container").css("overflow", "scroll");
zoomContainer.css("transform", "translate(" + 2 * translateX + "px, " + 2 * translateY + "px) scale(2)");
window.zoomedIn = true;
}
});
Контролируя значения translateX и translateY, вы можете изменить способ масштабирования.
Первоначальный визуализированный вид выглядит примерно так:
При нажатии на поле "А" вы будете соответствующим образом масштабировать:
(Обратите внимание, что нажатие кнопки D в конце просто показывает reset путем изменения размера.)
Проблема: масштабирование в поле D будет масштабировать контейнер масштабирования таким образом, чтобы прокрутка вверх и вниз не работала, потому что содержимое переполнено. То же самое происходит при масштабировании до ящиков B (левая половина обрезана) и C (верхняя половина обрезана). Только с A содержимое не переполняется вне контейнера.
В подобных ситуациях, связанных с масштабированием (см. CSS3 Transform Scale и Container with Overflow), одним из возможных решений является указание transform-origin: top left (или 0 0). Из-за того, как масштабирование работает относительно верхнего левого угла, функция прокрутки остается. Это, кажется, не работает здесь, потому что это означает, что вы больше не перемещаете содержимое, которое должно быть сфокусировано на щелчке (A, B, C или D).
Другим возможным решением является добавление в контейнер масштабирования margin-left и margin-top, что добавляет достаточно места для восполнения переполненного содержимого. Но опять же: значения перевода больше не выстраиваются в линию.
Итак: есть ли способ как увеличить данный элемент, так и переполнить с помощью прокрутки, чтобы содержимое не обрезано?
Обновление. Там грубое почти решение, оживляя scrollTop и scrollLeft, похожее на qaru.site/info/240060/... (см. пример jsfiddle), но это не совсем правильное решение, потому что оно сначала масштабирует вверху слева, а не намеченную цель. Я начинаю подозревать, что это на самом деле невозможно, потому что он, вероятно, эквивалентен запросу scrollLeft быть отрицательным.
