JavaScript увеличить центр DIV, не изменяя его размер

#javascript #html #css

#javascript #HTML #css

Вопрос:

Я пишу веб-приложение JavaScript на стороне клиента. Я использую только обычный JavaScript, без библиотек. У меня есть DIV, который является рабочей областью. Я сделал так, что при перетаскивании средней кнопкой мыши все в рабочей области перемещается, имитируя перемещение самого окна просмотра. Я действительно хочу, чтобы он увеличивался при прокрутке колесика мыши. Для этого я использую свойство CSS transform: scale() . Проблема в том, что это изменяет размер самого рабочего пространства, чего я не хочу, поэтому я заставил его изменить ширину и высоту рабочего пространства при увеличении, чтобы сохранить его прежний размер. Это было бы отлично, если бы я хотел увеличить масштаб из верхнего левого угла, но я хочу, чтобы он увеличивался из центра. Я попытался изменить начало преобразования на центр, но теперь, когда я увеличиваю масштаб, рабочая область перемещается в верхний правый угол, а когда я уменьшаю масштаб, рабочая область перемещается в верхний левый угол. Я думаю, что происходит то, что рабочее пространство изменяет свой размер от центра, но оно по-прежнему изменяется от верхнего левого угла. Что я могу сделать?

Редактировать: код, который я использую для изменения масштаба:

 container.onwheel = function(e) { //Disabled until answer to the zoom question on stackoverflow is given...
    e.preventDefault();

    let oldzoom = zoom_factor;
    if (zoom_factor >= 0) {
        var zoomedinby = zoom_factor*-6/e.deltaY;
        zoom_factor  = zoomedinby;
    }
    //Zoom in/out
    container.style["transform-origin"] = "50% 50%"
    container.style.transform = `scale(${zoom_factor})`;
    console.log(container.style.transform);

    container.style.width = `${100/zoom_factor}%`;
    container.style.height = `${100/zoom_factor}%`;
}

 .container {
    width: 100%;
    height: 100%;
    background-color: #00000000; /*Dark theme :D*/
    overflow: hidden; /*For srcolling behavior*/

    z-index: 0; /* Stay on bottom, used to make it work in combination with modals I have.*/

    transform: translate(0%, 0%);
    transform-origin: center center;
}

У меня есть рабочая версия веб-приложения (на данный момент без изменения масштаба) онлайн на https://thijmer.nl/logics /

1. Как насчет масштабирования, но не позволяя контейнеру изменять размер?

2. @AHaworth Если я использую только пропорциональность scale(), контейнер меняет размер. Как именно я могу остановить его изменение размера?

Ответ №1:

Вот упрощенный пример увеличения масштаба элемента без его переполнения.

Нажмите на цель, чтобы увеличить ее, нажмите еще раз, чтобы уменьшить масштаб.

Извините, у меня нет мыши и колеса, чтобы интегрировать его с вашим кодом. Основная идея состоит в том, чтобы масштабируемый элемент находился внутри внешнего элемента, а внешний элемент скрывал переполнение.

 .outer {
  position: relative;
  top: 20%;
  left: 30%;
  width: 50vw;
  height: 50vh;
  overflow:hidden;
  border-style: solid 1px;
}
.container {
  width: 100%;
  height: 100%;
  transform: scale(1);
  transform-origin: 50% 50%;
  transition: all 2s;
  background-image: radial-gradient(circle, black 0%, black 20%, magenta 20%, magenta 40%, cyan 40%, cyan 100%);
}
.expand {
  transform: scale(1.5);
}

 <div class="outer">
  <div class="container" onclick="this.classList.toggle('expand');"></div>
</div>

Развернуть фрагмент