<div class="container">
  <article id="container1">
    <p>文字</p>
    <p>文字</p>
    <p>文字</p>
    <p>文字</p>
    <p>文字</p>
    <p>文字</p>
    <p>文字</p>
    <p>文字</p>
    <p>文字</p>
    <p>文字</p>
    <p>文字</p>
    <p>文字</p>
    <p>文字</p>
    <p>文字</p>
    <p>文字</p>
    <p>文字</p>
    <p>文字</p>
    <p>文字</p>
    <p>文字</p>
    <p>文字</p>
    <p>文字</p>
    <p>文字</p>
    <p>文字</p>
    <p>文字</p>
    <p>文字</p>
    <p>文字</p>
    <p>文字</p>
  </article>
  <article id="container2">
    <p>文字</p>
    <p>文字</p>
    <p>文字</p>
    <p>文字</p>
    <p>文字</p>
    <p>文字</p>
    <p>文字</p>
    <p>文字</p>
    <p>文字</p>
    <p>文字</p>
    <p>文字</p>
    <p>文字</p>
    <p>文字</p>
    <p>文字</p>
    <p>文字</p>
    <p>文字</p>
    <p>文字</p>
    <p>文字</p>
    <p>文字</p>
    <p>文字</p>
    <p>文字</p>
    <p>文字</p>
    <p>文字</p>
    <p>文字</p>
    <p>文字</p>
    <p>文字</p>
    <p>文字</p>
  </article>
</div>
.container {
  display: flex;
  height: 99vh;
  max-height: 800px;
  gap: 1em;
}

.container > article {
  border: solid;
  flex: 1;
  background: #fff;
  padding: 1em;
  overflow: auto;
}
container1.addEventListener('scroll',function (ev) { 
  if (!this.flag) { 
    container2.flag = true; 
    container2.scrollTop = this.scrollTop; 
  } 
  this.flag = false; 
})
container2.addEventListener('scroll',function (ev) { 
  if (!this.flag) { 
    container1.flag = true; 
    container1.scrollTop = this.scrollTop; 
  } 
  this.flag = false; 
})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.