如何仅使用容器div的滚动滚动两个div

Question

The first div 's content is longer, than the second div and I want to use one scrollbar (container div ) for both.

When scrolling down for the two div s, I need the second div to scroll until it reaches the end of its content, then stop scrolling and the first div continue scrolling until it reaches the end of its content.

<div class="container">
  <div class="first"></div>
  <div class="second"></div>
</div>
<style>
  .container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    overflow: auto;
    height: calc(100vh - 40rem);
  }

  .first {
    width: 50%;
  }

  .second {
    width: 50%;
  }
</style>

Answer 1

A possible solution could be using the code from this answer

var element= document.getElementById('firstelement');
element.scrollTop = countedPixel;

You can count the pixel scrolled like this or with the native js function Example here

<div onscroll="doSomething()">