Difficulty in synchronizing scrolling between a canvas with and the rest of the page content

I’m currently working on a project that involves a Three.js canvas with OrbitControls for interactive 3D visualization. However, I’m facing difficulty in synchronizing scrolling between the Three.js canvas and the rest of the page content.

The issue is that while I can scroll through the page content outside the canvas, scrolling inside the canvas using OrbitControls only affects the zooming along the z-axis of the 3D scene, but it doesn’t scroll the entire page. What I want to achieve is synchronized scrolling between the canvas and the page content, so that when I scroll inside the canvas, it also scrolls the entire page content, and vice versa.

var scene = new THREE.Scene();
    var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
  renderer = new THREE.WebGLRenderer( { alpha: true } );
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.setClearColor( 0x000000, 0 );
  document.body.appendChild(renderer.domElement);
  scene.background = null;
    document.getElementById('canvas').appendChild(renderer.domElement);

    var controls = new THREE.OrbitControls(camera, renderer.domElement);
    controls.enableZoom = true;

    var geometry = new THREE.BoxGeometry();
    var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
    var cube = new THREE.Mesh(geometry, material);
    scene.add(cube);

    camera.position.z = 5;

    function animate() {
      requestAnimationFrame(animate);
      cube.rotation.x += 0.01;
      cube.rotation.y += 0.01;
      renderer.render(scene, camera);
    }
    animate();

 body {
      margin: 0;
      overflow: hidden;
      font-family: Arial, sans-serif;
    }
    #container {
      position: relative;
      width: 100%;
      height: 100vh;
      overflow-y: auto;
      perspective: 1000px;
    }
    canvas {
      position: fixed;
      top: 0px;
      left: 0px;
      z-index: 999999;
      width: 100vw;
      height: 100vh;
    }
    .content {
      padding: 20px;
    }

<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Scrolling Example</title>
</head>
<body>
  <div id="container">
    <canvas id="canvas"></canvas>
  </div>
  <div class="content">
    <h1>Lorem Ipsum</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi.</p>
    <!-- Add more content here -->
  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
  <script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
</body>
</html>