Hay una propiedad de zoom en css, hace lo que necesita, pero no hay soporte en los navegadores (Firefox en particular). También hay una propiedad transform: scale (), pero el hecho es que el bloque main_div se vuelve visible cuando se usa transform: scale (), que no es cuando se usa la propiedad zoom. Necesito exactamente este comportamiento.
¿Se puede aplicar la propiedad transform: scale() de tal manera que funcione como un zoom? ¿O qué análogos tiene la propiedad de zoom? ¿Cómo estar en esta situación?
Aquí está mi código. Debe verificar en Google Chrome, ya que la propiedad de zoom de Firefox no funciona https://jsfiddle.net/tj2349f5/1/
html
<div id='main_div'> <div id="second_div">Hello</div> </div> <input class="test_button" type="button" name="button_name" value="test">JavaScript
let test_button = document.querySelector('input.test_button'); test_button.addEventListener('click', () => { //second_div.style.transform = 'scale(0.5)'; second_div.style.zoom = 0.5; });La diferencia entre un zoom CSS 'real' y una escala es que un elemento escalado no cambia el espacio que ocupa, mientras que uno con zoom sí lo hace.
No estoy absolutamente seguro de si este código hace lo que desea, ya que en mi dispositivo no veo que aparezca el rojo como se describe en la pregunta [Creo que esto se debe a que mi dispositivo es más estrecho]. Lo que hace es cambiar el ancho y la altura del elemento ampliado junto con la escala.
El efecto que veo en Chrome es que las barras de desplazamiento cambian la misma cantidad, ya sea usando este código o el zoom CSS real, mientras que usando la escala solo las barras de desplazamiento no cambian en absoluto.
let test_button = document.querySelector('.test_button'); test_button.addEventListener('click', () => { second_div.style.height = second_div.offsetHeight * 0.5 + 'px'; second_div.style.width = second_div.offsetWidth * 0.5 + 'px'; second_div.style.transform = 'scale(0.5)'; test_button.style.display = 'none'; }); * { margin: 0; padding: 0; box-sizing: border-box; } div { display: flex; } div#main_div { display: block; margin: 10px auto; height: 80vh; width: 80vw; background: red; overflow: scroll; } div#second_div { height: 3000px; width: 3000px; background: green; transform-origin: 0% 0%; } <div id='main_div'> <div id="second_div">Hello</div> </div> <button class="test_button">CLICK TO MAKE IT LOOK LIKE A REAL CSS ZOOM BUT USING SCALE AND DIMENSION SETTING</button>Nota: si vuelve a escalar, recuerde restaurar también las dimensiones.