Как воссоздать масштаб браузера в JavaScript? ⇐ CSS

[Anonymous]

Поскольку, похоже, нет возможности напрямую установить уровень масштабирования браузера через js, я решил переопределить масштаб браузера и написать свой собственный код.
Этот код работает правильно, начиная с масштаб = 1, но у меня возникли проблемы со сценарием, в котором я уже немного увеличил масштаб и переместил курсор в другую часть изображения, чтобы увеличить масштаб еще больше. При этом фокус масштабирования всегда смещается дальше, чем предполагалось, поскольку изменение источника преобразования приводит к смещению всего изображения. Возможно, установка источника преобразования — неправильный подход...

Код: Выделить всё

var myDiv = document.querySelector(".container");
var img = myDiv.querySelector("img");

var scale = 1.0;

myDiv.addEventListener('wheel', function (ev) {
if(!ev.ctrlKey)
{
return;
}
ev.preventDefault();
const rect = myDiv.getBoundingClientRect();
const x = event.clientX - rect.left;
const y = event.clientY - rect.top;
img.style.transformOrigin = x + "px " + y + "px"

scale += event.deltaY * -0.005;

// Apply scale transform
img.style.transform = `scale(${scale})`;
})

Код: Выделить всё

.container {
width: 600px;
height: 200px;
margin: auto;
border: 1px solid gray;
overflow: hidden;
}

img {
width: 100%;
transform: scale(1.0);
}

Код: Выделить всё

[img]https://picsum.photos/id/200/600/200[/img]

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