How to create a webpage with left and right containers with synchronized opposite scrolling

Question

The website is created using elementor. In the home page, I want to split the viewport into two equal width sections (left and right). When Scroll, I want one section to go up and the other to go down simultaneously. So for this, The main container(class name: containerAll) have two containers in it with equal width(classnames: left and right).Both the containers have an another container in them(classname:content). Both the "content" containers have another 4 containers with minimum height vh 100. Then added the following css and java script. But it is not working in the large screen. When adjusting the browser width it works. Looks like width:height ratio is causing it. Please help with this issue or suggest any other way to make the website like I mentioned above. (responsive versions are not done yet.)

 body, html {
    margin: 0;
    padding: 0;
    overflow: hidden;
  }
.containerAll {
    display: flex;
    height: 100vh;
    overflow: hidden;
  }
.left, .right {
    flex: 1;
    overflow-y: scroll;
    height: 100%;
  }
   .content {
    height: 800px; /* Adjust the height as per your content */
  }


<script>
  // Get the left and right containers
  const leftContainer = document.querySelector('.left');
  const rightContainer = document.querySelector('.right');

// Set initial scroll positions
  leftContainer.scrollTop = leftContainer.scrollHeight - leftContainer.clientHeight;
  rightContainer.scrollTop = 0;

  // Add event listener to left container for scrolling
  leftContainer.addEventListener('scroll', function() {
    // Adjust scrollTop of the right container based on the scrollTop of the left container
    rightContainer.scrollTop = this.scrollHeight - this.clientHeight - this.scrollTop;
  });

  // Add event listener to right container for scrolling
  rightContainer.addEventListener('scroll', function() {
    // Adjust scrollTop of the left container based on the scrollTop of the right container
    leftContainer.scrollTop = this.scrollHeight - this.clientHeight - this.scrollTop;
  });
</script>