如何让同一个父容器中的两个div彼此独立滚动？

<div id="parentContainer">
  <div id="div1">
    <!-- div1的内容 -->
  </div>
  <div id="div2">
    <!-- div2的内容 -->
  </div>
</div>

#parentContainer {
  width: 300px;
  height: 200px;
  overflow: auto;
}

#div1, #div2 {
  height: 400px;
}

var parentContainer = document.getElementById("parentContainer");
var div1 = document.getElementById("div1");
var div2 = document.getElementById("div2");

parentContainer.addEventListener("scroll", function() {
  div1.scrollTop = parentContainer.scrollTop;
  div2.scrollTop = parentContainer.scrollTop;
});