I'm trying to zoom in using the input slider, and I want when content overflows the scrollbar to appear and also position the content to stay centered.

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>
  );
}

This is the example of what behaviour I want to achieve https://res.cloudinary.com/dv8aesvfs/video/upload/v1630150060/screen-capture_dernvs.mkv

I can center the content , but i can't sroll to the top or to the left like this : https://res.cloudinary.com/dv8aesvfs/video/upload/v1630150115/screen-capture_1_aas9k8.mkv

you can try it here : codesandbox