如何对两个列表框使用单个滚动滑块

<div>
  <div>
    <h4>列表框1</h4>
    <ul id="list1">
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
      <li>Item 4</li>
      <li>Item 5</li>
      <li>Item 6</li>
    </ul>
  </div>
  <div>
    <h4>列表框2</h4>
    <ul id="list2">
      <li>Item A</li>
      <li>Item B</li>
      <li>Item C</li>
      <li>Item D</li>
      <li>Item E</li>
      <li>Item F</li>
    </ul>
  </div>
</div>
<div id="scrollbar"></div>

#scrollbar {
  width: 10px;
  height: 200px;
  background-color: gray;
  position: absolute;
  right: 0;
}

ul {
  height: 200px;
  overflow: hidden;
  overflow-y: scroll;
}

li {
  height: 50px;
  line-height: 50px;
  border-bottom: 1px solid gray;
}

const list1 = document.getElementById('list1');
const list2 = document.getElementById('list2');
const scrollbar = document.getElementById('scrollbar');

scrollbar.addEventListener('scroll', () => {
  const scrollTop = scrollbar.scrollTop;
  
  list1.scrollTop = scrollTop;
  list2.scrollTop = scrollTop;
});