Как воссоздать функцию масштабирования браузера в JavaScript? ⇐ CSS

[Anonymous]

Итак, у меня есть страница с изображениями, на которые можно нажать, чтобы отобразить увеличенное изображение. Я хочу, чтобы пользователь мог увеличивать масштаб еще больше, используя движения пальцев/колесо на различных частях изображения, как это обычно можно сделать в браузере. Однако, как только они нажмут на изображение, чтобы уменьшить масштаб, я хочу, чтобы исходный масштаб страницы был восстановлен, независимо от того, насколько они были увеличены.
Поскольку, похоже, нет никакого способа Чтобы напрямую установить уровень масштабирования браузера через js, я решил переопределить масштаб браузера и написать свой собственный код. При масштабировании контейнер-зум-контейнер заполняется и покрывает всю страницу. Затем я переопределяю значение по умолчанию для события «колесо» (ctrlKey == true). Но я не переопределяю его, когда ctrlKey == false и я устанавливаю Zoom-container-container на использование прокрутки для переполнения, чтобы я мог использовать обычные функции прокрутки браузера для перемещения внутри увеличенного изображения.
Это работает правильно, начиная с масштаба = 1, но у меня возникают проблемы со сценарием, когда я уже немного увеличил масштаб и перемещаю курсор в другую часть изображения, чтобы увеличить масштаб. При этом фокус масштабирования всегда смещается дальше, чем должен, но я не знаю, почему. Возможно, установка источника преобразования — неправильный подход...
html






css
.zoom-container-container
{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow-y: scroll;
overflow-x: auto;

z-index: -99;
background-color: var(--background-color);
pointer-events: auto;
opacity: 0.0;
transition-property: opacity, z-index;
transition-duration: 0.25s, 0s;
transition-delay: 0.0s, 0.25s;
}
.zoom-container
{
position: relative;
width: 100%;
height: 100%;
transform-origin: var(--zoom-origin-x) var(--zoom-origin-y);
transform: scale(var(--zoom-scale));
}
.zoom-image
{
position:relative;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 100%;
height: 100%;
object-fit: contain;
}
.zoom-container-container.visible
{
z-index: 99;
cursor:zoom-out;
opacity: 1.0;

transition-property: opacity, z-index;
transition-delay: 0s, 0s;
}

события js:
zoomImage.addEventListener('pointerup', (e) =>
{
if(e.button == 0)
{
zoomOut();
}

zoomScale = 1.0;
zoomContainer.style.setProperty('--zoom-scale', zoomScale);
zoomContainer.style.setProperty('--zoom-origin-x', `${50}%`);
zoomContainer.style.setProperty('--zoom-origin-y', `${50}%`);

});
zoomImage.addEventListener('wheel', (e) =>
{
const rect = zoomContainer.getBoundingClientRect();
if(e.ctrlKey)
{
const cursorX = e.clientX - rect.left;
const cursorY = e.clientY - rect.top;

const newScale = Math.max(1.0, zoomScale - e.deltaY * zoomScaleMult);
zoomScale = newScale;

const originX = (cursorX / rect.width) * 100;
const originY = (cursorY / rect.height) * 100;
zoomContainer.style.setProperty('--zoom-origin-x', `${originX}%`);
zoomContainer.style.setProperty('--zoom-origin-y', `${originY}%`);
zoomContainer.style.setProperty('--zoom-scale', zoomScale);

e.stopPropagation();
e.preventDefault();
}
});


Подробнее здесь: https://stackoverflow.com/questions/785 ... javascript