There is a zoom property in css, it does what it needs, but there is no support in browsers (Firefox in particular). There is also a transform: scale () property, but the fact is that the main_div block becomes visible when using transform: scale (), which is not when using the zoom property. I need exactly this behavior.
Can the transform: scale() property be applied in such a way that it works like a zoom? Or what analogs does the zoom property have? How to be in this situation?
Here is my code. You need to check in Google Chrome, since Firefox's zoom property does not work 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;
});
The difference between a 'real' CSS zoom and a scale is that a scaled element does not change the space it takes up whereas a zoomed one does.
I am not absolutely sure whether this code does what you want as on my device I don't see the red appearing as described in the question [I think this is because my device is narrower]. What it does is change the width and height of the zoomed element alongside the scaling.
The effect on Chrome that I see is that the scrollbars change the same amount whether using this code or the real CSS zoom whereas using scale only the scrollbars don't change at all.
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>Note: if you scale back up remember to restore the dimensions as well.