Sé que podemos evitar el desbordamiento de contenido secundario usando la propiedad de overflow de CSS.
Pero el overflow: scroll no evita el desbordamiento.
let zoomInElem = document.getElementById('zoomIn') let zoomOutElem = document.getElementById('zoomOut') let contentElement = document.getElementById('content') zoomInElem.addEventListener('click', function () { console.log('zoomIn') contentElement.style.zoom = '200%' }) zoomOutElem.addEventListener('click', function () { console.log('zoomOut') contentElement.style.zoom = '100%' }) #main { width: 640px; height: 360px; border: solid; } #content { border: .1rem solid red; overflow: scroll; } button { margin: 1rem; } <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap demo</title> <style> </style> </head> <body> <div> <button id="zoomIn">ZoomIn</button> <button id="zoomOut">ZoomOut</button> </div> <div id="main"> <div id="content"> <h1>Hi</h1> <h2>Hi</h2> <h3>Hi</h3> <h4>Hi</h4> </div> </div> <script> </script> </body> </html> ¿Cómo puedo evitar el desbordamiento al cambiar la propiedad de zoom de CSS haciendo clic en el botón ZoomIn ?
Intente configurar el desbordamiento: desplazamiento; en div exterior
#main { position: relative;overflow: scroll;}Puede definir el width y el height de #content o configurar el overflow de #main para scroll .
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap demo</title> <style> #main { width: 640px; height: 360px; border: solid; overflow: scroll; } #content { /*width: 100%; height: 100%; */ border: .1rem solid red; /* overflow: scroll; */ } button { margin: 1rem; } </style> </head> <body> <div> <button id="zoomIn">ZoomIn</button> <button id="zoomOut">ZoomOut</button> </div> <div id="main"> <div id="content"> <h1>Hi</h1> <h2>Hi</h2> <h3>Hi</h3> <h4>Hi</h4> </div> </div> <script> let zoomInElem = document.getElementById('zoomIn') let zoomOutElem = document.getElementById('zoomOut') let contentElement = document.getElementById('content') zoomInElem.addEventListener('click', function () { contentElement.style.zoom = '200%' }) zoomOutElem.addEventListener('click', function () { contentElement.style.zoom = '100%' }) </script> </body> </html>