如何为同一容器内的两个列表设置统一滚动条？

方法一：使用统一滚动条（最直接） #

问题根源是每个子列表单独设置了固定高度和滚动属性，导致鼠标停在子列表上时，只会滚动当前列表，无法联动父容器。要实现统一滚动，只需移除子列表的滚动相关设置，让父容器承担整体内容的滚动：

修改后的CSS：

.container {
  width: 150px;
  height: 70px;
  overflow: auto;
}

/* 移除子列表的固定高度和滚动属性，让内容自然展开 */
.list {
  margin: 0;
  padding-left: 20px;
}

HTML无需修改，此时容器内的两个列表会作为一个整体，通过父容器的单一滚动条滚动，完全避免滚动中断问题。

方法二：保留子列表结构，通过JS实现流畅滚动切换 #

如果必须保留子列表的固定高度（比如需要子列表具备独立滚动能力），可以通过JavaScript监听滚动事件，在子列表滚到边界时，将滚动行为传递给父容器：

完整代码示例：

<div class="container">
  <ul class="list">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
    <li>Item 6</li>
    <li>Item 7</li>
    <li>Item 8</li>
    <li>Item 9</li>
    <li>Item 10</li>
    <li>Item 11</li>
    <li>Item 12</li>
  </ul>
  <ul class="list">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
    <li>Item 6</li>
    <li>Item 7</li>
    <li>Item 8</li>
    <li>Item 9</li>
    <li>Item 10</li>
    <li>Item 11</li>
    <li>Item 12</li>
  </ul>
</div>

<style>
.container {
  width: 150px;
  height: 70px;
  overflow: auto;
}

.list {
  height: 50px;
  overflow: auto;
  margin: 0;
  padding-left: 20px;
}
</style>

<script>
const lists = document.querySelectorAll('.list');
const container = document.querySelector('.container');

lists.forEach(list => {
  list.addEventListener('wheel', (e) => {
    const { deltaY } = e;
    const isAtBottom = list.scrollTop + list.clientHeight >= list.scrollHeight - 1;
    const isAtTop = list.scrollTop <= 1;

    // 子列表滚到边界且继续滚动时，将行为传递给父容器
    if ((isAtBottom && deltaY > 0) || (isAtTop && deltaY < 0)) {
      e.preventDefault();
      container.scrollTop += deltaY;
    }
  });
});
</script>

这个方案会在子列表滚到顶部/底部且继续滚动时，自动切换到父容器滚动，无需移动鼠标即可实现流畅的滚动体验。

内容的提问来源于stack exchange，提问作者Viewed