Estoy tratando de hacer zoom usando el control deslizante de entrada, y quiero que cuando el contenido se desborde, aparezca la barra de desplazamiento y también coloque el contenido para que permanezca centrado.

 import { useState } from "react"; export default function App() { const [scale, setScale] = useState(0.3); const updateScale = (e) => { setScale(parseFloat(e.target.value)); }; return ( <div style={{ background:"#DE5833", width:"100%", height:"100vh" }}> <div style={{ position: "absolute", zIndex: 50 }} > <input type="range" min="0.1" max="1.5" step="0.01" value={scale} onChange={updateScale} /> </div> <div style={{ background:"#DE5833", width:"100%", height:"100%", display:"flex", justifyContent:"center", alignItems : "center", transform: `scale(${scale})`, }}> <div style={{ width: 600, height: 600, background:"#2563EB" }} > </div> </div> </div> ); }

Este es el ejemplo del comportamiento que quiero lograr https://res.cloudinary.com/dv8aesvfs/video/upload/v1630150060/screen-capture_dernvs.mkv

Puedo centrar el contenido, pero no puedo desplazarme hacia arriba o hacia la izquierda de esta manera: https://res.cloudinary.com/dv8aesvfs/video/upload/v1630150115/screen-capture_1_aas9k8.mkv

Puedes probarlo aquí: codesandbox